【JavaScript】現在日時の取得・表示方法

JavaScriptで現在日時を取得・表示する方法について解説していきます。

現在日時の取得方法

JavaScriptで現在日時を取得するには、new Date()を使用します。

new Date()はDateオブジェクトを生成し、コンソール出力すると以下のような出力結果が得られます。

JavaScript

var date = new Date();
console.log(date); // Wed Jun 20 2023 01:23:45 GMT+0900

new Date()で生成されたDateオブジェクトから年月日などの各要素の取得にはメソッドを使用します。

たとえば「年」要素はgetFullYear()を、「月」要素はgetMonth()を使用します。

注意点としてgetMonth()は月の配列番号を返す仕様のため、1月の場合はgetMonth()の取得結果が０となります。

そのため、getMonth()の取得結果に1を加算する必要があります。

また、曜日を取得するgetDay()も取得結果は配列番号となるので、日本語に変換したい場合は曜日の配列を独自に定義する必要があります。

以下は各要素を取得するサンプルになります。

JavaScript

var date = new Date();
console.log(date); // Wed Jun 20 2023 01:23:45 GMT+0900
// 「年」要素を取得
console.log(date.getFullYear() + '年'); // 2023年
// 「月」要素を取得
console.log((date.getMonth() + 1) + '月'); // 6月
// 「日」要素を取得
console.log(date.getDate() + '日'); // 20日
// 「時」要素を取得 
console.log(date.getHours() + '時');  // 1時
// 「分」要素を取得
console.log(date.getMinutes() + '分');  // 23分
// 「秒」要素を取得
console.log(date.getSeconds() + '秒');  // 45秒
// 「ミリ秒」要素を取得
console.log(date.getMilliseconds() + 'ミリ秒');  // 000ミリ秒
// 曜日の配列を定義 & 「曜日」要素を取得
const days = ["日","月","火","水","木","金","土"];
console.log(days[date.getDay()] + '曜日');  // 火曜日

日時要素を「0埋め」する方法

getMonth()やgetDate()は取得結果によっては1桁で返却されるため、桁数を揃えたい場合は0埋めする必要があります。

お手軽な方法は文字列の「0」と要素の取得結果を結合し、後ろの2桁をJavaScriptのsliceメソッドを使い取得する方法です。

以下が0埋めのサンプルになります。

JavaScript

var date = new Date();
console.log(date); // Wed Jun 20 2023 01:23:45 GMT+0900
// 「月」要素を0埋めで取得
console.log(('0' + (date.getMonth() + 1)).slice(-2) + '月'); // 06月
// 「日」要素を0埋めで取得
console.log(('0' +　date.getDate()).slice(-2) + '日'); // 20日
// 「時」要素を0埋めで取得 
console.log(('0' +　date.getHours()).slice(-2) + '時');  // 01時

現在日時の表示方法

現在日時の表示には要素の中身を設定するinnerHTMLプロパティを使用します。

以下のサンプルでは表示するための変数nowを定義し、id="now"のHTML要素に設定しています。

HTML

<div id="now"></div>

JavaScript

var date = new Date();
// 年月日等の各要素を取得
var y = date.getFullYear();
var m = ('0' + (date.getMonth() + 1)).slice(-2);
var d = ('0' +　date.getDate()).slice(-2);
var h = ('0' +　date.getHours()).slice(-2);
var min = ('0' + date.getMinutes()).slice(-2);
var s = ('0' + date.getSeconds()).slice(-2);
// HTML要素に現在日時を表示する
var now = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
document.getElementById('now').innerHTML = now;

サンプル

See the Pen js_get_date by Usagi (@naniwa_usagi) on CodePen.

まとめ

JavaScriptで現在日時を取得・表示する方法について解説しました。

今回は以上です。