【JavaScript】 今日の日付を取得・表示するサンプルコード
更新日：2023/01/30
JavaScriptで今日の日付を取得してフォーマットする方法と、サンプルです。
Date()を使用して日時を取得
現在の日時を取得するには、Dateオブジェクトをコンストラクタに引数を与えないで初期化します。
const now = new Date();
初期化したDateオブジェクトは、次のメソッドで日時を取得できます。
| 大区分 | 小区分 | メソッド | 説明 |
|---|---|---|---|
| 日付 | 年 | getFullYear() | 年を4桁の数値で返します |
| 月 | getMonth() | 1月から12月を0から11までの数値で返します。 0から始まることに注意！！ | |
| 日 | getDate() | 日付を数値（1から31）で返します。 | |
| 曜日 | getDay() | 日曜日から土曜日までを0から6までの数値で返します。 | |
| 時刻 | 時 | getHours() | 時間を数値（0から23）で返します。 |
| 分 | getMinutes() | 分を数値（0から59）で返します。 | |
| 秒 | getSeconds() | 秒を数値（0から59）で返します。 | |
| ミリ秒 | getMilliseconds() | ミリ秒を数値（0から999）で返します。 |
現在日時表示サンプルコード
上の情報をもとに作成した、今日の日付を文字列で取得する関数のサンプルコードをいくつかお伝えします。
サンプルコード１：通常版
const nowDate = function ( date = null ) {
const now = date instanceof Date ? date : new Date();
const youbi = ["日","月","火","水","木","金","土"];
return `${ now.getFullYear() }年 ${ now.getMonth() + 1 }月 ${ now.getDate() }日 (${ youbi[now.getDay()] })`
+ ` ${ now.getHours() }時 ${ now.getMinutes() }分 ${ now.getSeconds() }秒`;
};
console.log( nowDate() );
関数nowDateは引数が空のときは、現在の日時を。
初期化済みのDateオブジェクトが引数として与えられたときは、そのオブジェクトの日時をフォーマットします。
return の後の ` ` はテンプレートリテラルというJavaScriptの機能です。
使いこなすと非常に便利なので、使用方法や入力方法がわからない方は、次のページを見てください。
参考記事：【javaScript】 便利！テンプレートリテラルとは！だが普及しなそう…
サンプルコード２：午前/午後版
サンプル１は24時間制でしたので、サンプル２では今日の日付を12時間制で表示しています。
const nowDate = function ( date = null ) {
const now = date instanceof Date ? date : new Date();
const youbi = ["日","月","火","水","木","金","土"];
const ampm = () => {
const hour = now.getHours();
return hour > 12 ? `PM${hour - 12 }` : `AM${hour}`;
};
return `${ now.getFullYear() }年 ${ now.getMonth() + 1 }月 ${ now.getDate() }日 (${ youbi[now.getDay()] })`
+ ` ${ ampm() }時 ${ now.getMinutes() }分 ${ now.getSeconds() }秒`;
};
console.log( nowDate() );
AMとPMの判定は、時間が12よりも大きいかどうかをチェックしています。
サンプルコード３：和暦版
次のコードは今日の日付を和暦で表示するサンプルです。
const wareki = date => {
const WarekiData = [
{year:2019,month:5,day:1 , yearText: { text :"令和" , stext:"R"}},
{year:1989,month:1,day:8 , yearText: { text :"平成" , stext:"H"}},
{year:1926,month:12,day:25 , yearText: { text :"昭和" , stext:"S"}},
{year:1912,month:7,day:30 , yearText: { text :"大正" , stext:"T"}},
{year:1868,month:10,day:23 , yearText: { text :"明治" , stext:"M"}},
{year:1868,month:10,day:23 , yearText: { text :"明治" , stext:"M"}},
];
WarekiData.forEach( e => {
e.Milliseconds = new Date(e.year , e.month -1 , e.day).getTime();
});
const t = date.getTime(); // 現在の日付からミリ秒を取得
const w = WarekiData.find( e => t >= e.Milliseconds);
return w.yearText.text + (date.getFullYear() - w.year + 1);
};
const nowDate = function ( date = null ) {
const now = date instanceof Date ? date : new Date();
const youbi = ["日","月","火","水","木","金","土"];
return `${ wareki(now) }年 ${ now.getMonth() + 1 }月 ${ now.getDate() }日 (${ youbi[now.getDay()] })`
+ ` ${ now.getHours() }時 ${ now.getMinutes() }分 ${ now.getSeconds() }秒`;
};
console.log( nowDate( ) );
和暦の情報テーブルを作成して、今日の日付とマッチングをおこなっています。
詳しくは次のページを見てください。
参考記事：【JavaScript】 Dateオブジェクトから和暦を取得する
その他の取得方法
Dateオブジェクトには、toLocaleString()などの日付をフォーマットするメソッドが用意されています。
しかし表記方法の指定が難しのと、フォーマットが決まっていて希望通りに表示できるかどうかわかりません。
そのためtoLocaleString()を試行錯誤するよりも、getFullYear()などを使って直接日時を取得して、自由に組み合わせた方が効率的です。
詳しくは次のページを見てください。
【JavaScript】 日時と時刻を取得して表示してみる
関連自作ツール：日付/時刻フォーマット Javascriptライブラリ
更新日：2023/01/30
関連記事
スポンサーリンク
記事の内容について
こんにちはけーちゃんです。
説明するのって難しいですね。
「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。
裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。
掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。
ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php
このサイトは、リンクフリーです。大歓迎です。
