JavaScriptのDateオブジェクトを使って、Webページで日付や時刻を表示する方法について解説します。Dateオブジェクトを使うと、現在の日付や時刻を取得してブラウザーに表示したり、現時点から特定の日付までの日数を計算したり、その他日付や時刻を条件とした様々な処理を行うことができます。本コラムでは、Dateオブジェクトの基本をサンプルコードと共に説明しますので、実際にPC上でサンプルコードを記述して、Javascriptの動きを確認して下さい。
関連記事：JavaScriptで日付と時刻をフォーマットしてみよう！
関連記事：JavaScriptで日付を計算する方法
目次
1.1.日付(Date)オブジェクトの基本
1.2. 日付(Date)オブジェクトに「ミリ秒」を指定する
1.3. 日付(Date)オブジェクトに「日付」を表す文字列を指定する
1.4. 日付(Date)オブジェクトに「年月日」を指定する
1.5. 日付(Date)オブジェクトに「時刻（時分秒）」を指定する
2.1. 日付(Date)オブジェクトから「年」を取得する
2.2. 日付(Date)オブジェクトから「月」を取得する
2.3. 日付(Date)オブジェクトから「日」を取得する
3.1. 日付(Date)オブジェクトで「０時から２３時」までのデーターを取得する
3.2. 日付(Date)オブジェクトで「分」を取得する
3.3. 日付(Date)オブジェクトで「秒」を取得する
3.4. 日付(Date)オブジェクトで「ミリ秒」を取得する
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">ここに２０１７年８月８日の日付が表示されます。</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」、２０１７年８月８日で置き換えています。
ボタンをクリックすると日時を表示します。
ここに２０１７年８月８日の日付が表示されます。
「日時を表示」ボタンをクリックして下さい。ボタン下の文字列「ここに２０１７年８月８日の日付が表示されます。」が日時の表示に切り替わります。
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">ここに２０２０年８月８日の日付が表示されます。</p>
<script>
function dateFunction3() {
//日付オブジェクトの作成
var date3 = new Date("8/8/2020");
//段落タグの中身を"date3"で置き換える
var pelem003 = document.getElementById("date003");
pelem003.innerHTML = date3;
}
</script>
</body>
</html>
Dateオブジェクトに指定できる日付文字列の形式はいくつかありますが、スラッシュ（ / ）区切りの数字で指定する場合は、「月」、「日」、「年」の順序で記述します。また、「月」を英語で指定する場合は、「月」、「日」、「年」の順序は任意になります。
２０２０年８月８日を設定する場合、「"8/8/2020"」、「"Aug 8 2020"」、「"8 Aug 2020"」、「"8 2020 August"」、「"8 August 2020"」のどれを指定しても大丈夫です。日付の文字列はダブルクオーテーション(" ")で囲みます。
ボタンをクリックすると日時を表示します。
ここに２０２０年８月８日の日付が表示されます。
サンプルコードでは、Dateオブジェクトの宣言時に「"8/8/2020"」を指定しています。日時を表示ボタンを押して表示を確認して下さい。
1.4. 日付(Date)オブジェクトに「年月日」を指定する
Dateオブジェクトの引数に、「年」、「月」、「日」の数値で指定してみましょう。
●年月日の指定
var 変数名 = new Date(year, month, day);
この形式で日付けを指定する場合、１月から１２月を「０～１１」の範囲で指定します。例えば「８月」を表したい場合、「Dateオブジェクト」の引数に設定する数値は「７」を指定します。「年」は西暦の４桁、「日」は「１～３１」の間の数字をカンマ( , )区切りで指定します。
●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">ここに２０１０年８月８日の日付が表示されます。</p>
<script>
function dateFunction4() {
//日付オブジェクトの作成
var date4 = new Date(2010,7 ,8);
//段落タグの中身を"date4"で置き換える
var pelem004 = document.getElementById("date004");
pelem004.innerHTML = date4;
}
</script>
</body>
</html>
サンプルコードでは、「２０１０年８月８日」を表示するのに、Dateオブジェクトの引数に「2010, 7, 8」を指定しています。
ボタンをクリックすると日時を表示します。
ここに２０１０年８月８日の日付が表示されます。
「日時を表示」ボタンをクリックして、「年月日」を確認して下さい。
1.5. 日付(Date)オブジェクトに「時刻（時分秒）」を指定する
Dateオブジェクトの引数には、「年」、「月」、「日」に加えて「時刻」を数値で指定する事も可能です。
●時刻の指定
var 変数名 = new Date(year, month, [day], [hours], [minutes], [seconds], [millisecond]);
この形式で時刻を指定する場合、「時間(hours)」を「０～２３」、「分数(minutes)」を「０～５９」、「秒数(seconds)」を「０～５９」、「ミリ秒(seconds)」を「０～９９９」の範囲で指定します。
※なお、数値で日時を指定する場合、「年」、「月」、「日」、「時」、「分」、「秒」の内、「年」と「月」は必須項目になりますが、「日」、「時」、「分」、「秒」、「ミリ秒」は任意になります。
●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">ここに２０１７年１２月８日、１８時３０分４５秒の日付が表示されます。</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>
サンプルコードでは、「２０１７年１２月８日、１８時３０分４５秒」を表示するのに、Dateオブジェクトの引数に「2017,11, 8, 18,30,45,800」を指定しています。
ボタンをクリックすると日時を表示します。
ここに２０１７年１２月８日、１８時３０分４５秒の日付が表示されます。
「日時を表示」ボタンをクリックして、日付と時刻を確認して下さい。
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() メソッドです。例えば２０１７年８月８日にボタンをクリックした場合、変数の「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() で取得する「月」データーは「０～１１」で「１月」の「０」から始まり、「１２月」の「１１」までの数値になります。その為２１行目の代入式「getMonth()+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() メソッドで取得する値は「１～３１」です。getMonth() メソッドのようにプラス１する必要はありませんので、ブラウザーに値を表示する場合などは、取得した数値がそのまま日付のデーターとして使う事ができます。
サンプルコードでは、ボタンをクリックすると現在の「日」がブラウザーに表示されます。サンプルボタンをクリックして、現在の「日」が表示されるか確認してみて下さい。
ボタンをクリックすると「日」を表示します。
ここに現在の「日」が表示されます。
3. 特定の時刻を取得する
3.1. 日付(Date)オブジェクトで「０時から２３時」までのデーターを取得する
Dateオブジェクトの時刻データの内、「０時から２３時」までのデーターを取得するには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)オブジェクトから現在の時刻を取得する事ができます。取得するデーターは「０～２３（午前０時～午後１１時）」になります。
例えば２０１７年８月８日の２０時にボタンをクリックした場合、変数の「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)オブジェクトから現在の「分数」を取得してブラウザーに表示します。取得するデーターは「０～５９」になります。
ボタンをクリックすると時間を表示します。
ここに現在の「時間」が表示されます。
例えば２０１７年８月８日の２０時３０分にボタンをクリックした場合、変数の「minutes」には「30」が代入されます。２４行目の「innerHTML 」で、取得した時間の前後に文字列を足し、１４行目の段落タグに表示します。サンプルのボタンをクリックして、現在の「分」が表示されるかを確認してみて下さい。
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)オブジェクトから現在の「秒数」を取得してブラウザーに表示します。取得するデーターは「０～５９」になります。
ボタンをクリックすると時間を表示します。
ここに現在の「時間」が表示されます。
２０１７年８月８日の２０時３０分５０秒にボタンをクリックした場合、変数の「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)オブジェクトから現在の「ミリ秒」を取得してブラウザーに表示します。取得するデーターは「０～９９９」になります。
ボタンをクリックすると時間を表示します。
ここに現在の「時間」が表示されます。
２０１７年８月８日の２０時３０分５０秒５６７ミリ秒にボタンをクリックした場合、変数の「milliseconds」には「567」が代入されます。サンプルボタンをクリックして、現在の「ミリ秒」が表示されるか確認してみて下さい。
