JavaScriptで現在日時を取得・表示する方法について解説していきます。
現在日時の取得方法
JavaScriptで現在日時を取得するには、new Date()を使用します。new Date()はDateオブジェクトを生成します。
JavaScript
var date = new Date();<br>console.log(date); // Wed Jun 20 2023 01:23:45 GMT+0900Dateオブジェクトには年月日などのさまざまな要素をもっていて、各要素を取得するためのメソッドが用意されています。
各要素の取得メソッド一覧
年: getFullYear()
月: getMonth()
日: getDate()
時: getHours()
分: getMinutes()
秒: getSeconds()
ミリ秒: getMilliseconds()
曜日: getDay()
注意点として月を取得するgetMonth()は配列番号を返す仕様のため、0から11までの値が返ってきます。
そのため、getMonth()を使用して月を求める場合は1を加算する必要があります。
また、曜日を取得するgetDay()も配列番号を返す仕様なので、日本語に変換したい場合は曜日の配列を独自に定義する必要があります。
以下は各要素を取得するサンプルになります。
JavaScript
var date = new Date();<br>console.log(date); // Wed Jun 20 2023 01:23:45 GMT+0900<br><br>// 「年」要素を取得<br>console.log(date.getFullYear() + '年'); // 2023年<br>// 「月」要素を取得<br>console.log((date.getMonth() + 1) + '月'); // 6月<br>// 「日」要素を取得<br>console.log(date.getDate() + '日'); // 20日<br>// 「時」要素を取得 <br>console.log(date.getHours() + '時'); // 1時<br>// 「分」要素を取得<br>console.log(date.getMinutes() + '分'); // 23分<br>// 「秒」要素を取得<br>console.log(date.getSeconds() + '秒'); // 45秒<br>// 「ミリ秒」要素を取得<br>console.log(date.getMilliseconds() + 'ミリ秒'); // 000ミリ秒<br>// 曜日の配列を定義 & 「曜日」要素を取得<br>const days = ["日","月","火","水","木","金","土"];<br>console.log(days[date.getDay()] + '曜日'); // 火曜日日時要素を「0埋め」する方法
getMonth()やgetは取得結果によっては1桁で返却されるため、桁数を揃えたい場合は0埋めする必要があります。Date()
お手軽な方法は文字列の「0」と要素の取得結果を結合し、後ろの2桁をJavaScriptのsliceメソッドを使い取得する方法です。
以下が0埋めのサンプルになります。
JavaScript
var date = new Date();<br>console.log(date); // Wed Jun 20 2023 01:23:45 GMT+0900<br>// 「月」要素を0埋めで取得<br>console.log(('0' + (date.getMonth() + 1)).slice(-2) + '月'); // 06月<br>// 「日」要素を0埋めで取得<br>console.log(('0' + date.getDate()).slice(-2) + '日'); // 20日<br>// 「時」要素を0埋めで取得 <br>console.log(('0' + date.getHours()).slice(-2) + '時'); // 01時現在日時の表示方法
現在日時の表示には要素の中身を設定するinnerHTMLプロパティを使用します。
以下のサンプルでは表示するための変数nowを定義し、id="now"のHTML要素に設定しています。
HTML
<div id="now"></div>JavaScript
var date = new Date();<br>// 年月日等の各要素を取得<br>var y = date.getFullYear();<br>var m = ('0' + (date.getMonth() + 1)).slice(-2);<br>var d = ('0' + date.getDate()).slice(-2);<br>var h = ('0' + date.getHours()).slice(-2);<br>var min = ('0' + date.getMinutes()).slice(-2);<br>var s = ('0' + date.getSeconds()).slice(-2);<br>// HTML要素に現在日時を表示する<br>var now = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;<br>document.getElementById('now').innerHTML = now;サンプル
See the Pen
js_get_date by Usagi (@naniwa_usagi)
on CodePen.
まとめ
JavaScriptで現在日時を取得・表示する方法について解説しました。
以下にポイントをまとめます。
今回は以上です。
