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

    公開日:2017年08月09日 最終更新日:2022年04月25日

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

    関連記事: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のスキルが活かせる最新求人情報をチェック!

    月額単価50万円〜60万円
    勤務地 東京都 千代田区
    月額単価70万円〜
    勤務地 東京都 渋谷区
    月額単価50万円〜60万円
    勤務地 東京都 千代田区
    月額単価70万円〜
    勤務地 東京都 港区
    勤務地 フルリモート

    フリーランスの方でこのようなお悩みありませんか?

    • 定期的に案件を紹介してほしい
    • 完全フルリモートワークや、週1出勤など、働き方を選びたい
    • 単価交渉など営業周りが苦手なので、誰かに任せたい

    プロエンジニアにお任せください!

    プロエンジニアはほとんどEND直案件!高額単価案件ならお任せください。
    完全フルリモートや、週1出勤など、希望に合わせた働き方ができる案件を多数ご用意しています。
    単価や契約交渉などは弊社キャリアコンサルタントに全てお任せください。

    無料登録して、あなたの希望に合った案件をチェック!

    簡単60秒!無料登録はこちらから

    おすすめ記事

  • ピックアップ

    フリーランス

    NEW 【PHP/Laravel】サーバーサイドエンジニア★高度診断・健康管理システム 管理画面のリプレイス

    主に大手企業のシステムを受託開発している企業の案件です。 今回はLaravel、Nuxt を用いた高度診断・...

    月額単価:50万円〜60万円

    フリーランス

    【Ruby/React/Node.js】フルスタックエンジニア★動画配信プラットフォームの開発

    動画配信プラットフォームを提供する企業にて、Ruby / React、Node.js のフルスタックエンジニアとして...

    月額単価:70万円〜

    フリーランス

    【Laravel/Nuxt.js】フルスタックエンジニア★業務システム開発

    主に大手企業のシステムの受託開発や親会社(リユースショップ/リサイクルショップ)のシステムを開発...

    月額単価:50万円〜60万円

    フリーランス

    【PHP】フルスタックエンジニア★保育・教育施設向け業務支援サービスの開発

    保育・教育施設向けICTシステムやSaaSを展開している企業にて、当システムの開発支援業務をご担当いただ...

    月額単価:70万円〜

SCROLL TOP