JavaScriptで日付や時刻を表示する方法

    • このページをはてなブックマークに追加

    JavaScriptのDateオブジェクトを使って、Webページで日付時刻を表示する方法について解説します。Dateオブジェクトを使うと、現在の日付や時刻を取得してブラウザーに表示したり、現時点から特定の日付までの日数を計算したり、その他日付や時刻を条件とした様々な処理を行うことができます。本コラムでは、Dateオブジェクトの基本をサンプルコードと共に説明しますので、実際にPC上でサンプルコードを記述して、Javascriptの動きを確認して下さい。

    最終更新日:2018年5月7日

    関連記事:JavaScriptで日付と時刻をフォーマットしてみよう!
    関連記事:JavaScriptで日付を計算する方法

    目次

    1. 日付(Date)オブジェクトを生成する

    1.1. 日付(Date)オブジェクトの基本

    JavaScriptで日付や時刻を処理するには、「Date」オブジェクトを使います。「Date」オブジェクトの基本書式は以下の通りです。

    var 変数名 = new Date();

    任意のオブジェクト変数にnew Date()を代入して、Dateオブジェクトを作成します。実際にコードを書いてみましょう。「date001.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●date001.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    <script>
    //日付オブジェクトの作成
    var date001 = new Date();
    //日付変数(date001)をブラウザーに表示する
    document.writeln(date001);
    </script>
    </body>
    </html>

    HTMLファイルの「scriptタグ」内のコードがJavascriptのコードになります。
    date001」変数に「new Date()」を代入する事で、Date(日付)オブジェクトを作成しています。Dateオブジェクトの括弧に値を指定しない場合は、現在の日付と時刻がdate001変数に設定されます。

    document.writeln(date001);」で「date001」変数の値をブラウザーに表示しています。

    以下の青いボーダーの中に「date001.html」のコードを埋め込んでいます。ブラウザーを更新すると、更新時の「日付」と「時刻」が表示されます。「F5」ボタンかブラウザーの更新ボタンを押して日時を確認してみて下さい。

    ▲ページトップへ戻る

    1.2. 日付(Date)オブジェクトに「ミリ秒」を指定する

    次に、Date(日付)オブジェクトの引数(括弧の中)に「ミリ秒(milliseconds)」を指定するコードを見てみましょう。

    ●ミリ秒の指定

    var 変数名 = new Date(milliseconds);

    ミリ秒」を指定する場合は、基準時間である 1970年1月1日 00:00:00 (UTC:) から経過したミリ秒を整数値で指定します。

    ●date002.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    <p>ボタンをクリックすると日時を表示します。</p>
    <button onclick="dateFunction2()">日時を表示</button>
    <p id="date002">ここに2017年8月8日の日付が表示されます。</p>
    <script>
    function dateFunction2() {
    //日付オブジェクトの作成
    var date2 = new Date(1502118000000);
    //段落タグの中身を"date2"で置き換える
    var pelem002 = document.getElementById("date002");
    pelem002.innerHTML = date2;
    }
    </script>
    </body>
    </html>

    「date002.html」は「buttonタグ」のonclickイベントで関数の「dateFunction2」を呼び出すコードのサンプルです。
    「日時を表示」ボタンをクリックすると、「scriptタグ」内のJavascriptが実行されます。変数宣言で、Dateオブジェクトを「new演算子」を付けて代入します。

    基準時間から「1502118000000ミリ秒」経過した日時は「2017年8月8日」になります。Dateオブジェクトの引数に「1502118000000」を指定すると、オブジェクト変数の「date2」に、”2017年8月8日” が設定されます。

    次に、HTMLのid属性が「date002」であるタグを取得し、「pelem002.innerHTML = date2;」で、取得したタグ(pelem002)の中身を「date2」、2017年8月8日で置き換えています。

    ボタンをクリックすると日時を表示します。

    ここに2017年8月8日の日付が表示されます。

    「日時を表示」ボタンをクリックして下さい。ボタン下の文字列「ここに2017年8月8日の日付が表示されます。」が日時の表示に切り替わります。

    ▲ページトップへ戻る

    1.3. 日付(Date)オブジェクトに「日付」を表す文字列を指定する

    次は、日付を表す文字列をDateオブジェクトの引数に指定して、ブラウザーに日付を表示してみましょう。

    ●日付の指定

    var 変数名 = new Date(dateValue);

    ●date003.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    <p>ボタンをクリックすると日時を表示します。</p>
    <button onclick="dateFunction3()">日時を表示</button>
    <p id="date003">ここに2020年8月8日の日付が表示されます。</p>
    <script>
    function dateFunction3() {
    //日付オブジェクトの作成
    var date3 = new Date("8/8/2020");
    //段落タグの中身を"date3"で置き換える
    var pelem003 = document.getElementById("date003");
    pelem003.innerHTML = date3;
    }
    </script>
    </body>
    </html>

    Dateオブジェクトに指定できる日付文字列の形式はいくつかありますが、スラッシュ( / )区切りの数字で指定する場合は、「月」、「日」、「年」の順序で記述します。また、「月」を英語で指定する場合は、「月」、「日」、「年」の順序は任意になります。

    2020年8月8日を設定する場合、「"8/8/2020"」、「"Aug 8 2020"」、「"8 Aug 2020"」、「"8 2020 August"」、「"8 August 2020"」のどれを指定しても大丈夫です。日付の文字列はダブルクオーテーション(" ")で囲みます。

    ボタンをクリックすると日時を表示します。

    ここに2020年8月8日の日付が表示されます。

    サンプルコードでは、Dateオブジェクトの宣言時に「"8/8/2020"」を指定しています。日時を表示ボタンを押して表示を確認して下さい。

    ▲ページトップへ戻る

    1.4. 日付(Date)オブジェクトに「年月日」を指定する

    Dateオブジェクトの引数に、「年」、「月」、「日」の数値で指定してみましょう。

    ●年月日の指定

    var 変数名 = new Date(year, month, day);

    この形式で日付けを指定する場合、1月から12月を「0~11」の範囲で指定します。例えば「8月」を表したい場合、「Dateオブジェクト」の引数に設定する数値は「7」を指定します。「年」は西暦の4桁、「日」は「1~31」の間の数字をカンマ( , )区切りで指定します。

    ●date004.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    <p>ボタンをクリックすると日時を表示します。</p>
    <button onclick="dateFunction4()">日時を表示</button>
    <p id="date004">ここに2010年8月8日の日付が表示されます。</p>
    <script>
    function dateFunction4() {
    //日付オブジェクトの作成
    var date4 = new Date(2010,7 ,8);
    //段落タグの中身を"date4"で置き換える
    var pelem004 = document.getElementById("date004");
    pelem004.innerHTML = date4;
    }
    </script>
    </body>
    </html>

    サンプルコードでは、「2010年8月8日」を表示するのに、Dateオブジェクトの引数に「2010, 7, 8」を指定しています。

    ボタンをクリックすると日時を表示します。

    ここに2010年8月8日の日付が表示されます。

    「日時を表示」ボタンをクリックして、「年月日」を確認して下さい。

    ▲ページトップへ戻る

    1.5. 日付(Date)オブジェクトに「時刻(時分秒)」を指定する

    Dateオブジェクトの引数には、「年」、「月」、「日」に加えて「時刻」を数値で指定する事も可能です。

    ●時刻の指定

    var 変数名 = new Date(year, month, [day], [hours], [minutes], [seconds], [millisecond]);

    この形式で時刻を指定する場合、「時間(hours)」を「0~23」、「分数(minutes)」を「0~59」、「秒数(seconds)」を「0~59」、「ミリ秒(seconds)」を「0~999」の範囲で指定します。

    ※なお、数値で日時を指定する場合、「年」、「月」、「日」、「時」、「分」、「秒」の内、「年」と「月」は必須項目になりますが、「日」、「時」、「分」、「秒」、「ミリ秒」は任意になります。

    ●date005.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    <p>ボタンをクリックすると日時を表示します。</p>
    <button onclick="dateFunction5()">日時を表示</button>
    <p id="date005">ここに2017年12月8日、18時30分45秒の日付が表示されます。</p>
    <script>
    function dateFunction5() {
    //日付オブジェクトの作成
    var date5 = new Date(2017,11, 8, 18,30,45,800);
    //段落タグの中身を"date5"で置き換える
    var pelem005 = document.getElementById("date005");
    pelem005.innerHTML = date5;
    }
    </script>
    </body>
    </html>

    サンプルコードでは、「2017年12月8日、18時30分45秒」を表示するのに、Dateオブジェクトの引数に「2017,11, 8, 18,30,45,800」を指定しています。

    ボタンをクリックすると日時を表示します。

    ここに2017年12月8日、18時30分45秒の日付が表示されます。

    「日時を表示」ボタンをクリックして、日付と時刻を確認して下さい。

    ▲ページトップへ戻る

    2. 特定の日付を取得する

    2.1. 日付(Date)オブジェクトから「年」を取得する

    生成したDateオブジェクトから「年」データーを取得するには、getFullYear()メソッドを使います。

    ●getFullYear()

    date_obj.getFullYbjear();

    ●date006.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    <p>ボタンをクリックすると日時を表示します。</p>
    <button onclick="dateFunction6()">日時を表示</button>
    <p id="date006">ここに現在の「年」が西暦で表示されます。</p>
    <script>
    function dateFunction6() {
    //日付オブジェクトを作成する
    var date6 = new Date();
    //日付オブジェクトから「年」を取得する
    var year = date6.getFullYear();
    //段落タグの中身を"date6"で置き換える
    var pelem006 = document.getElementById("date006");
    pelem006.innerHTML = "今は" + year + "年です。";
    }
    </script>
    </body>
    </html>

    サンプルコードの「date006.html」では、日付(Date)オブジェクトを引数なしで作成していますので、「date6」には、ボタンをクリックした時点の日付が入ります。
    日付データから西暦の「年」だけを取得するのがgetFullYear() メソッドです。例えば2017年8月8日にボタンをクリックした場合、変数の「year」には「2017」が代入されます。「innerHTML 」で、取得した「年」の前後に文字列を足し段落タグに表示しています。
    ボタンをクリックすると現在の「年」がブラウザーに表示されます。サンプルのボタンをクリックして、現在の「年」が西暦で表示されるか確認してみて下さい。

    ボタンをクリックすると日時を表示します。

    ここに現在の「年」が西暦で表示されます。

    ▲ページトップへ戻る

    2.2. 日付(Date)オブジェクトから「月」を取得する

    Dateオブジェクトから「月」データーを取得するにはgetMonth()メソッドを使います。

    ●getMonth()

    date_obj.getMonth();

    ●date007.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    <p>ボタンをクリックすると「月」が表示されます。</p>
    <button onclick="dateFunction7()">日付を表示</button>
    <p id="date007">ここに現在の「月」が表示されます。</p>
    <script>
    function dateFunction7() {
    //日付オブジェクトを作成する
    var date7 = new Date();
    //日付オブジェクトから「月」を取得する
    var month = date7.getMonth()+1;
    //段落タグの中身を置き換える
    var pelem007 = document.getElementById("date007");
    pelem007.innerHTML = "今日は" + month + "月です。";
    }
    </script>
    </body>
    </html>

    getMonth() で取得する「月」データーは「0~11」で「1月」の「0」から始まり、「12月」の「11」までの数値になります。その為21行目の代入式「getMonth()+1」で1を足し、文字列としてブラウザーに表示しています。

    サンプルコードでは、ボタンをクリックすると現在の「月」がブラウザーに表示されます。サンプルボタンをクリックして、現在の「月」が表示されるか確認してみて下さい。

    ボタンをクリックすると「月」が表示されます。

    ここに現在の「月」が表示されます。

    ▲ページトップへ戻る

    2.3. 日付(Date)オブジェクトから「日」を取得する

    Dateオブジェクトから「日」データーを取得するにはgetDate()メソッドを使います。

    ●getDate()メソッド

    date_obj.getDate();

    ●date008.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    <p>ボタンをクリックすると「日」が表示されます。</p>
    <button onclick="dateFunction8()">日付を表示</button>
    <p id="date008">ここに現在の「日」が表示されます。</p>
    <script>
    function dateFunction8() {
    //日付オブジェクトを作成する
    var date8 = new Date();
    //日付オブジェクトから「日」を取得する
    var day = date8.getDate();
    //段落タグの中身を置き換える
    var pelem008 = document.getElementById("date008");
    pelem008.innerHTML = "今日は" + day + "日です。";
    }
    </script>
    </body>
    </html>

    getDate() メソッドで取得する値は「1~31」です。getMonth() メソッドのようにプラス1する必要はありませんので、ブラウザーに値を表示する場合などは、取得した数値がそのまま日付のデーターとして使う事ができます。
    サンプルコードでは、ボタンをクリックすると現在の「日」がブラウザーに表示されます。サンプルボタンをクリックして、現在の「日」が表示されるか確認してみて下さい。

    ボタンをクリックすると「日」を表示します。

    ここに現在の「日」が表示されます。

    ▲ページトップへ戻る

    3. 特定の時刻を取得する

    3.1. 日付(Date)オブジェクトで「0時から23時」までのデーターを取得する

    Dateオブジェクトの時刻データの内、「0時から23時」までのデーターを取得するにはgetHours()メソッドを使います。

    ●getHours()メソッド

    date_obj.getHours();

    ●date009.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    <p>ボタンをクリックすると時間を表示します。</p>
    <button onclick="dateFunction9()">時間を表示</button>
    <p id="date009">ここに現在の「時間」が表示されます。</p>
    <script>
    function dateFunction9() {
    //日付オブジェクトを作成する
    var date9 = new Date();
    //日付オブジェクトから「時」を取得する
    var hour = date9.getHours();
    //段落タグの中身を"date9"で置き換える
    var pelem009 = document.getElementById("date009");
    pelem009.innerHTML = "今は" + hour + "時です。";
    }
    </script>
    </body>
    </html>

    getHours() メソッドで日付(Date)オブジェクトから現在の時刻を取得する事ができます。取得するデーターは「0~23(午前0時~午後11時)」になります。
    例えば2017年8月8日の20時にボタンをクリックした場合、変数の「hours」には「20」が代入されます。「innerHTML 」で、取得した時間の前後に文字列を足して段落タグに表示します。サンプルのボタンをクリックして、現在の時刻が表示されるかを確認してみて下さい。

    ボタンをクリックすると時間を表示します。

    ここに現在の「時間」が表示されます。

    ▲ページトップへ戻る

    3.2. 日付(Date)オブジェクトで「分」を取得する

    Dateオブジェクトの時刻データの内、「分」データーを取得するにはgetMinutes()メソッドを使います。

    ●getMinutes()メソッド

    date_obj.getMinutes();

    ●date010.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    <p>ボタンをクリックすると時間を表示します。</p>
    <button onclick="dateFunction10()">時間を表示</button>
    <p id="date010">ここに現在の「時間」が表示されます。</p>
    <script>
    function dateFunction10() {
    //日付オブジェクトを作成する
    var date10 = new Date();
    //日付オブジェクトから「分」を取得する
    var minutes = date10.getMinutes();
    //段落タグの中身を"date10"で置き換える
    var pelem010 = document.getElementById("date010");
    pelem010.innerHTML = "今は" + minutes + "分です。";
    }
    </script>
    </body>
    </html>

    getMinutes() メソッドで日付(Date)オブジェクトから現在の「分数」を取得してブラウザーに表示します。取得するデーターは「0~59」になります。

    ボタンをクリックすると時間を表示します。

    ここに現在の「時間」が表示されます。

    例えば2017年8月8日の20時30分にボタンをクリックした場合、変数の「minutes」には「30」が代入されます。24行目の「innerHTML 」で、取得した時間の前後に文字列を足し、14行目の段落タグに表示します。サンプルのボタンをクリックして、現在の「分」が表示されるかを確認してみて下さい。

    ▲ページトップへ戻る

    3.3. 日付(Date)オブジェクトで「秒」を取得する

    Dateオブジェクトの時刻データの内、「秒」データーを取得するにはgetSeconds()メソッドを使います。

    ●getSeconds()メソッド

    date_obj.getSeconds();

    ●date011.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    <p>ボタンをクリックすると時間を表示します。</p>
    <button onclick="dateFunction11()">時間を表示</button>
    <p id="date011">ここに現在の「時間」が表示されます。</p>
    <script>
    function dateFunction11() {
    //日付オブジェクトを作成する
    var date11 = new Date();
    //日付オブジェクトから「秒」を取得する
    var seconds = date11.getSeconds();
    //段落タグの中身を"date11"で置き換える
    var pelem011 = document.getElementById("date011");
    pelem011.innerHTML = "今は" + seconds + "秒です。";
    }
    </script>
    </body>
    </html>

    getSeconds() メソッドで日付(Date)オブジェクトから現在の「秒数」を取得してブラウザーに表示します。取得するデーターは「0~59」になります。

    ボタンをクリックすると時間を表示します。

    ここに現在の「時間」が表示されます。

    2017年8月8日の20時30分50秒にボタンをクリックした場合、変数の「seconds」には「50」が代入されます。サンプルボタンをクリックして、現在の「秒数」が表示されるかを確認してみて下さい。

    ▲ページトップへ戻る

    3.4. 日付(Date)オブジェクトで「ミリ秒」を取得する

    Dateオブジェクトの時刻データの内、「ミリ秒」データーを取得するにはgetMilliseconds()メソッドを使います。

    ●getMilliseconds()メソッド

    date_obj.getMilliseconds();

    ●date012.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    <p>ボタンをクリックすると時間を表示します。</p>
    <button onclick="dateFunction12()">時間を表示</button>
    <p id="date012">ここに現在の「時間」が表示されます。</p>
    <script>
    function dateFunction12() {
    //日付オブジェクトを作成する
    var date12 = new Date();
    //日付オブジェクトから「ミリ秒」を取得する
    var milliseconds = date12.getMilliseconds();
    //段落タグの中身を"date12"で置き換える
    var pelem012 = document.getElementById("date012");
    pelem012.innerHTML = "今は" + milliseconds + "ミリ秒です。";
    }
    </script>
    </body>
    </html>

    getMilliseconds() メソッドで日付(Date)オブジェクトから現在の「ミリ秒」を取得してブラウザーに表示します。取得するデーターは「0~999」になります。

    ボタンをクリックすると時間を表示します。

    ここに現在の「時間」が表示されます。

    2017年8月8日の20時30分50秒567ミリ秒にボタンをクリックした場合、変数の「milliseconds」には「567」が代入されます。サンプルボタンをクリックして、現在の「ミリ秒」が表示されるか確認してみて下さい。

    ▲ページトップへ戻る

    JavaScriptのスキルが活かせる最新求人情報をチェック!

    【企業名】株式会社 ブレイン・ラボ

    年収400〜700万円
    勤務地東京都港区

    【企業名】株式会社エートゥジェイ

    年収400〜650万円
    勤務地東京都港区

    【企業名】株式会社アクアビットスパイラルズ

    年収400〜700万円
    勤務地東京都品川区

    株式会社 エイトレッド

    年収400〜600万円
    勤務地東京都渋谷区
    • このページをはてなブックマークに追加

    おすすめ記事

  • OCTPASS

    ピックアップ

    正社員

    【PHP】サーバーサイドエンジニア|アドテクマーケティング★自社ツールの開発

    年収 :600万円〜

    ◆サーバーサイドエンジニアとして自社ツールの開発を担当 ◆最先端のマーケティングスキルも身につける...

    株式会社 ピアラ

    正社員

    【Java/PHP】システム開発エンジニア|企業グループIT部門◎100%自社内開発★未経験

    年収 :250万円〜350万円

    ◆700名規模グループ内のITシステムの開発や保守業務 ◆自社内開発100%!じっくりと業務に取り組める ◆...

    株式会社イノベーションネクスト

    正社員

    【LAMP】システムエンジニア|100%自社内開発★服装自由・フレックス◎独学可

    年収 :300万円〜350万円

    ◆自社サービスの企画~開発までをお任せします。 ◆シェアNo.1クラウドソリューションを提供するベンチ...

    ブライシス株式会社

    正社員

    【PHP/Java】システムエンジニア|100%自社内開発★在宅導入/時短OK◎働くママさん歓迎

    年収 :350万円〜600万円

    ◆自社サービスの企画~開発までをお任せします。 ◆シェアNo.1クラウドソリューションを提供するベンチ...

    ブライシス株式会社

    正社員

    【PHP/Python】開発エンジニア|自社ECサイト★マンガ×IT少数精鋭のベンチャー◎独学可

    ◆月間10億PVのマンガサービスを支えるPythonエンジニア ◆マンガに興味ある方!はじめはPython勉強意欲...

    株式会社TORICO