日付・時刻

【JavaScript】 日時と時刻を取得して表示してみる

更新日：2023/01/30

 

基本はDateオブジェクト

日時を操作するにはまずDateオブジェクトのコンストラクタから、インスタンスを作成します。

目的とする日時はDateオブジェクト作成時に指定し、後から変更することができません。
※実際には設定するためのメソッドがありますが、インスタンスを再生成したほうが手っ取り早いです。

現在の日付からDateオブジェクトを作成する

引数なしでDateオブジェクトのコンストラクタを呼び出すと、現在の日付が適用されます。

const now = new Date(); // 現在の日付からDateオブジェクト作成
console.log( now.toString() ); // 日付を文字列に変換

任意の日付からDateオブジェクトを作成する

任意の日付からDateオブジェクトを作成するには、いくつかの方法があります。

日時を表す文字列から作成

"2020/4/1 10:15:20" など、日時を表す文字列からDateオブジェクトを作成できます。

例

const now = new Date( "2020/4/30 16:17:01" );
console.log( now.toString() );

const now2 = new Date( "Thu Apr 30 2020 16:17:01 GMT+0900" );
console.log( now2.toString() );

日時の形式は、使用しているブラウザや地域によって異なるようです。
汎用性を持たせたい場合は、使用しない方がよさそうですね。

日時を個別に引数で指定して作成

日付と日時を順番に引数で渡すことで、Dateオブジェクトを作成できます。

例

const now = new Data( 2014 , 4 , 30 );  // 日付のみ指定
console.log( now.toString() );

const now2 = new Data( 2014 , 4 , 30 , 16 , 17 , 01);  // 日付と時刻を指定
console.log( now2.toString() );

日時を個別に引数で指定して作成

1970/1/1 UTCから経過したミリ秒で、Dateオブジェクトを作成できます。

例：現在から24時間後の日時を求める

const nowMilliseconds = Date.now(); // 現在のミリ秒を取得(*1)
const tomorrowMilliseconds = nowMilliseconds + 1000 * 60 * 60 * 24; // 24時間をミリ秒に換算して加算

const tomorrow = new Date( tomorrowMilliseconds );
console.log( tomorrow.toString() );

(*1) Date.now()は、現在のミリ秒を返します。

 

表示できればいい場合 toLocaleString等を使用

日時と時刻を日本時間でフォーマットしてそのまま表示したいとき、Dateオブジェクトの次のメソッドを使用すると楽です。

・ toLocaleString() … 日付と時刻を表示
・ toLocaleDateString() … 日付のを表示
・ toLocaleTimeString() … 時刻を表示

const now = new Date(); // 現在の日時を元にDateオブジェクトのインスタンス作成

console.log( now.toLocaleString() ); // 現在の日時をフォーマットして表示

console.log( now.toLocaleDateString() ); // 現在の日付をフォーマットして表示

console.log( now.toLocaleTimeString() ); // 現在の時刻をフォーマットして表示

あくまでシステムが用意している形式のみ取得できます。
形式のこだわりたいときは、次の自分で表記方法を決めたい場合を見てください。

もう少し詳しく見ていきましょう。

各メソッドの構文

構文

Date.prototype.toLocaleString( locales , options )

Date.prototype.toLocaleDateString( locales , options )

Date.prototype.toLocaleTimeString( locales , options )

locales - 一番目の引数（省略可）

フォーマットしたい形式を国別で指定します。

const now = new Date();
console.log( now.toLocaleString( "ja-JP" ) ); // 日本
console.log( now.toLocaleString( "ja-JP-u-ca-japanese" ) ); // 日本（和暦）
console.log( now.toLocaleString( "en-US" ) ); // アメリカ
console.log( now.toLocaleString( "ko-KR" ) ); // 韓国

国によって年月日の順番や区切り文字、時制(24か12か）が異なるようです。

日本で使用するなら、 ja-JP と ja-JP-u-ca-japanese を覚えておけば大丈夫です。

options - 二番目の引数（省略可）

optionsは、日付のフォーマット方法を次のプロパティを持つオブジェクトで指定します。
yearやhourなど、直接日時を表すプロパティを指定すると、そのプロパティに対応するもののみ表記されます。

options{
    era : 時代の表現方法。"long","short","narrow" 
    year : 年の表現方法。"numeric","2-digit"
    month : 月の表現方法。"numeric","2-digit","long","short" ,"narrow"
    day : 日の表現方法。"numeric","2-digit"
    weekday : 曜日の表示方法。"long","short","narrow"

    hour12 : 12時間制かどうか

    hour : 時の表現方法。"numeric","2-digit"
    minute : 分の表現方法。"numeric","2-digit"
    second : 秒の表現方法。"numeric","2-digit"
}

eraの指定例

now.toLocaleString( "ja-JP" ,{ era : "long" });
now.toLocaleString( "ja-JP" ,{ era : "short" });
now.toLocaleString( "ja-JP" ,{ era : "narrow" });
now.toLocaleString( "ja-JP-u-ca-japanese" ,{ era : "long" });
now.toLocaleString( "ja-JP-u-ca-japanese" ,{ era : "short" });
now.toLocaleString( "ja-JP-u-ca-japanese" ,{ era : "narrow" });

日本の場合、"long"と"short"は同じ結果となるようです。

yearの指定例

now.toLocaleString( "ja-JP" ,{ year : "numeric" });
now.toLocaleString( "ja-JP" ,{ year : "2-digit"  });
now.toLocaleString( "ja-JP-u-ca-japanes" ,{ year : "numeric" });
now.toLocaleString( "ja-JP-u-ca-japanes" ,{ year : "2-digit"  });

現在（2020/04)の実装ではyearを指定すると、和暦表示されないようです。

monthの指定例

now.toLocaleString( "ja-JP" ,{ month : "numeric" });
now.toLocaleString( "ja-JP" ,{ month : "2-digit"  });
now.toLocaleString( "ja-JP" ,{ month : "long"  });
now.toLocaleString( "ja-JP" ,{ month : "short"  });
now.toLocaleString( "ja-JP" ,{ month : "narrow" });
now.toLocaleString( "ja-JP" ,{ year: "numeric", month : "numeric" });
now.toLocaleString( "ja-JP" ,{  era : "long" , year: "numeric", month : "numeric" });
now.toLocaleString( "ja-JP-u-ca-japanes" ,{  era : "long" , year: "numeric", month : "numeric" });

"2-digit"以外は全て同じ表示となります。

現在（2020/04)の実装ではyearを指定すると、日本語表記されなくなります。
eraに "long"を指定すれば表記されますが...なんだか仕様が複雑で理解しきれないですね。

dayの指定例

now.toLocaleString( "ja-JP" ,{ day : "numeric" });
now.toLocaleString( "ja-JP" ,{ day : "2-digit"  });
now.toLocaleString( "ja-JP" ,{ year: "numeric", month: "numeric" , day: "numeric" });
now.toLocaleString( "ja-JP" ,{ year: "numeric", day: "numeric" });
now.toLocaleString( "ja-JP" ,{  era : "long" , year: "numeric", day: "numeric" });
now.toLocaleString( "ja-JP-u-ca-japanes" ,{  era : "long" , year: "numeric", day: "numeric" });

yearとdayのみ指定すると、年の後に日がくるというおかしな表記になります。
それは仕様だとして... yearとmonthを同時に指定すると日本語表記されない...
これは仕様なんだろうか...

weekdayの指定例
now.toLocaleString( "ja-JP" ,{ weekday : "long"  });
now.toLocaleString( "ja-JP" ,{ weekday : "short" });
now.toLocaleString( "ja-JP" ,{ weekday : "narrow"  });
now.toLocaleString( "ja-JP", {  era : "long" , year: "numeric", month: "numeric" , day: "numeric",weekday : "long" });
now.toLocaleString( "ja-JP-u-ca-japanes", {  era : "long" , year: "numeric", month: "numeric" , day: "numeric",weekday : "long" });

"short"と"narrow"は同じ結果となりました。

weekdayの場合、yearとmonthを同時に指定しても日本語表記されるようです。
何が何だかわからなくなってきました。

hour12の指定例

now.toLocaleString( "ja-JP" ,{ hour12:false });
now.toLocaleString( "ja-JP" ,{ hour12:true });
now.toLocaleString( "ja-JP-u-ca-japanes" ,{ hour12:true });

trueなら12時間制。
falseなら24時間制です。

hour/minute/secondの指定例

now.toLocaleString( "ja-JP" ,{ hour : "numeric" });
now.toLocaleString( "ja-JP" ,{ hour : "2-digit" });
now.toLocaleString( "ja-JP" ,{ hour : "numeric" , minute : "numeric"});
now.toLocaleString( "ja-JP" ,{ hour : "numeric" , second : "numeric"});
now.toLocaleString( "ja-JP" ,{ hour : "numeric" 
    , second : "numeric" , minute : "numeric"});

year/month/dayと同じように、表記が日本語だったり『 : 』だったりと、指定するプロパティによって変わってしまいます。

正直扱いにくいです。

 

自分で表記方法を決めたい場合

toLocaleStringは、実装されている表記しかできません。
それ以外の表記をしたいときは、年・月・日・時・分・秒を個別に取得します。

システムお任せのtoLocaleStringよりも、こちらの方が汎用性が高いです。

年・月・日・時・分・秒を個別に取得するメソッド

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 now = new Date(); // 現在の日付からDateオブジェクト作成

const nowString = "今日は" + now.getFullYear() + "年" 
         + (now.getMonth() + 1).toString().padStart(2,"0") + "月"
         + now.getDate().toString().padStart(2,"0") + "日"
         +"です。時刻は" + now.getHours().toString().padStart(2,"0") + "時"
         + now.getMinutes().toString().padStart(2,"0") + "分"
         + now.getSeconds().toString().padStart(2,"0") + "秒"
         +"です。";
console.log( nowString );

ちなみに、.toString().padStart(2,"0") は、数値を文字列に変換後、ゼロで穴埋めした二けたの文字列を作成しています。
詳しくは、次のページを見てください。
参考：【JavaScript】 ゼロやスペースで埋めして桁揃えする

 

まとめ

日本だけでなく世界向けにサイトを作成している場合、toLocaleString()を引数なしで使用するといいですね。

ですが日本向けのみのサイトの場合、getFullYear()などで一つずつ値を取得して、日付を組み立てた方がよさそうです。

更新日：2023/01/30

書いた人（管理人）：けーちゃん

関連記事

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。