JavaScriptで日付や日時関連のサンプルコード一覧完全版

JavaScriptで日付や日時関連のサンプルコード一覧完全版
JavaScriptで日付や日時関連のサンプルコード一覧完全版

 

 
読了目安:150

Are you want to translate this page to English? Please click this link to translate via ‘©Google Translate'!

ganohr.net favicon

みなさんこんにちは! ガノー(Ganohr)です! (≧▽≦)

今回は、JavaScriptで日付を取得したり、フォーマットしたり、コンバートしたりするサンプルコードを一覧で紹介します。

※ この記事が扱っている内容は膨大なので、目次から適当な項目を選んでから読んでね!

 

他のサイトでも色々とサンプルを提示してはいますが、正直ナンセンスなコードばかりなのでそこらへんへのアンチテーゼとして記事執筆しています。

よければ最後までざっと確認してみてくださいね。

 
更新履歴
2023/04/09 情報を追記
2023/04/04 情報を追記
2023/04/03 公開
 

目次

JavaScriptでよくある日付と時刻のナンセンスなコード

スマートフォンを持ちながら首を傾げる女性
new Date()を多用したり、getFullYear(), getMonth() + 1, … 全部のフィールドをいちいち記述して初期化するなんて面倒くさいよね!?

あなたは、JavaScriptで「yyyyMMdd」形式の文字列を生成するコードをコーディングできますか?

例えば、以下のようなコードを思いつくのではないでしょうか。

    function format(val) {
        return ("0" + new String(val)).slice(-2);
    }
    const date = new Date();
    const year = new String(date.getFullYear());
    const month = format(date.getMonth() + 1);
    const day = format(date.getDate());
    console.log(year + month + day);

※ 空白及び改行除き213文字

 

…え、「こんなベタなコード書くわけがないだろ!!」って? そうですよね!

当サイトに訪れてくださっているあなたが、こんなコードを書くとは私も思ってません。

 

…こう言っちゃアレですが、「yyyyMMddの文字列生成ごときに、どんだけ面倒なコード書く気なんだよ!」って三村マサカズばりにツッコミを入れたくなります。

これを、単純にワンライナーにして書いた例は以下の通りです。…これでも無駄が多いですけど、さっきのよりは大分短くなっていますし、若干効率的です。

const date = new Date(); console.log(date.getFullYear() + ("" + (date.getMonth() + 1)).padStart(2, "0") + ("" + date.getDate()).padStart(2, "0"));

※ 空白及び改行除き129文字

 

このコードでも確かに良くなってはいますが、まだまだです。

この記事を読めば、さくっと、以下のようにシンプルな実装ができるようになります。

console.log(new Date().toISOString().replace(/T.*|[^0-9]/g,''));

※ 空白及び改行除き63文字

また、これら3つをそれぞれ10万回呼び出した速度は3.431秒、3.140秒、3.481秒とほぼ大差ありません

若干ワンライナーで書いたほうが速いのですが、ほぼ誤差レベルです。

 

要は、この記事を理解してコーディングすれば、動作速度はほぼ同じでありながら、その上で、コーディング量を2/3も減らせるんです。

ということで、この記事をぜひ理解してくださいね。

速度計測コードと計測結果
console.clear();
const start = Date.now();
for(let i = 0; i < 100000; i++) {
    function format(val) {
        return "0" + new String(val).slice(-2);
    }
    const date = new Date();
    const year = new String(date.getFullYear());
    const month = format(date.getMonth() + 1);
    const day = format(date.getDate());
    console.log(year + month + day);
}
const last = Date.now();
console.log("start", start);
console.log("last", last);
console.log("elapsed", last - start);

// : // 20230403 // start 1680462786739 // last 1680462790170 // elapsed 3431
console.clear(); const start = Date.now(); for(let i = 0; i < 100000; i++) { getDate()).padStart(2, "0")); } const last = Date.now(); console.log("start", start); console.log("last", last); console.log("elapsed", last - start);
// : // 20230403 // start 1680462814551 // last 1680462817691 // elapsed 3140
console.clear(); const start = Date.now(); for(let i = 0; i < 100000; i++) { console.log(new Date().toISOString().replace(/T.*|[^0-9]/g,'')); } const last = Date.now(); console.log("start", start); console.log("last", last); console.log("elapsed", last - start);
// : // 20230402 // start 1680462864324 // last 1680462867805 // elapsed 3481

JavaScriptで日時を扱う―Dateオブジェクトを生成する

お洒落なカフェで読書をしている眼鏡の女性
まずは基本的な使い方を覚えましょう。new Date()または、new Date(数値)または、new Date(Dateオブジェクト)または、new Date(文字列)です。

JavaScriptで日時や日付、時間を扱う場合はDateオブジェクトを生成し、そのオブジェクトを利用します。

サムネイルDate() コンストラクター - JavaScript | MDNDate() コンストラクターは Date のインスタンスを生成し、または現在時刻を表す文字列を返します。 ... 外部サイトへアクセスdeveloper.mozilla.org

 

 
注意

この記事ではconst date = new Date();と書かれている場所は、dateに格納されている日時は日本時間の「2023/4/2 23:15:50」という値になっています。

同様にnew Date()だけだったり、Date.now()の場合も同様の日時であると読み替えてください。

JavaScriptで現在の日時オブジェクトを生成する

const date = new Date();
console.log(date.toString());
出力例
Sun Apr 02 2023 23:15:50 GMT+0900 (日本標準時)

 

まずは初歩から。

new Date()のように、コンストラクタに引数を与えずに生成すると、現在時刻が設定されます。

 

この記事ではnew Date()の値が「2023/4/2 23:15:50」になるため、実際に出力結果をみると確かに「AprilApr)」の「2日」、「Sun」で「日曜日」、時刻も想定通りの出力が得られています。

これを英語表記から日本語表記にするJavaScriptのコードも後半で扱います。

 

まずは順序よく見ていきましょう。

JavaScriptでエポックタイムから日時を扱うDateオブジェクトを生成する

JavaScriptではDateクラスのコンストラクタに、数値一つを与えると、世界協定時(UTC※)の1970年1月1日午前0時0分0秒からの経過ミリ秒数を整数値で指定したものとして解釈されます。

通常のUNIX Time(ユニックスタイム、Epoch Time・エポックタイム)は秒数で指定しますが、JavaScriptはミリ秒での指定であるため、1000倍せねばならないという点に注意してください。

 

const date = new Date(0);
console.log(date);
出力例
Thu Jan 01 1970 09:00:00 GMT+0900 (日本標準時)

※ UTCについては以下の記事を参考にされてください。

サムネイルUTCとGMTとJSTの違いは?原子時計~クオーツ時計まで体系的に解説!うるう秒の謎が分かった!UTC(協定世界時)とGMT(世界標準時)の違いはご存知でしょうか。そして日本で使われているJSTとの関係はなんでしょうか。これらの違いを解説し、UTCの特徴である「うるう秒」の謎、クオーツ時計や原子時計まで体系的に解説します! ... 続きを読むganohr.net2017-03-01

 

また、JavaScriptのDateクラスにおけるUTCは、いうなれば「UTC+0」の、ロケールが指定されていない世界共通の時間としての意味が強いという点も抑えておきましょう。

JavaScriptで日時を扱うDateオブジェクトからエポックタイムを取得する

const date = new Date(1234567891011);
console.log(date);
console.log(date.getTime());
console.log(Date.now());
出力例
Sat Feb 14 2009 08:31:31 GMT+0900 (日本標準時)
1234567891011
1680444950000

 

JavaScriptのDateオブジェクトであればgetTime()メソッドで現在日時のエポックタイム(ms単位)を取得できます。

現在日時であればスタティックメソッドのDate.now()を利用できます。

JavaScriptで日にちや時間の加減算を行う

JavaScriptで24時間後(明日)を求める

const date = new Date(Date.now() + 24 * 3600 * 1000);
console.log(date.toString());

 

出力例
Mon Apr 03 2023 23:15:50 GMT+0900 (日本標準時)

 

Date.now()を用いれば、簡単に時間の加減算が行えます。

もしも変数に代入しているDateオブジェクトを用いたい場合はdate.getTime()を利用します。

new Date(date.getTime() + 24 * 3600 * 1000)

JavaScriptで翌月1日(月初め)の日時オブジェクト(Date)を生成する

const date = new Date();
console.log(new Date(date.getFullYear(), date.getMonth() + 2, 1));
出力例
Thu Jun 01 2023 00:00:00 GMT+0900 (日本標準時)

 

ここではdate.getFullYear()メソッドで年を取得し、月date.getMonth()の結果に2を加算し、日にちとして1を指定した日付を生成します。

ここでなぜ、2を加算するのかというと、date.getMonth()の結果は0始まりで記憶されるためです。ようは4月なら3と記憶されています。したがって翌月を知りたいので2を加算するという訳です。

 
メモ
あれ? 12月でも大丈夫?

このサンプルコードをパッと見て、「あれ? これ12月でも大丈夫??」と疑問をいだけた方は天才かもしれません。

実直に考えれば、12月の場合、指定する月の値は「11 + 2」で「13」月になってしまうのです。

 

要は「【2023/12/24】の翌月の1日を求めようとすると、【2023/13/1】を指定する」ことになる訳です。

こういうのにパッと見て気づけるとプログラミングに非常に向いているといえます。

ただ実際はDateクラスのコンストラクタが、年月日・日時のそれぞれの上限を超えている場合、自動的に桁上りを考慮してくれるため、このままで問題ありません。世の中案外便利な機能にあふれているものです。

JavaScriptで月末の日時オブジェクト(Date)を生成する

const date = new Date();
console.log(new Date(new Date(date.getFullYear(), date.getMonth() + 2, 1) - 1));
出力例
Wed May 31 2023 23:59:59 GMT+0900 (日本標準時)

 

翌月を求めた結果から1ミリ秒過去に戻すことで月末の日時を生成しています。

Dateオブジェクトは‘オートボクシング’(Autoboxing、型の自動変換)が働くため、整数値で減算すれば自動的にそのオブジェクトに対してgetTime()メソッドがコールされ、その結果を利用できます。

最終的には、その1ミリ秒前の日時(のエポックタイム)から、再度Dateオブジェクトを生成すればOKです。

JavaScriptで日付と時刻の書式指定/書式変換・Dateをこねくり回す

オシャレな部屋で読書をしている眼鏡の女性
ここからは、JavaScriptで結構皆間違っているタイムゾーンの指定や12時間表記/24時間表記への変更方法などを詳細にサンプルで確認していきましょう

Dateオブジェクトを生成したり加減算することはできるようになったと思うので、ここからはフォーマット変換です。

JavaScriptで年・月・日・時・分・秒・ミリ秒を取得する

console.log(
    date.getFullYear(),
    date.getMonth() + 1,
    date.getDate(),
    date.getHours(),
    date.getMinutes(),
    date.getSeconds(),
    date.getMilliseconds()
);
出力例
2023 4 2 23 15 50 0

 

これの説明は不要ですよね。

それぞれデフォルトのロケールに変換された結果を取得します。

 

とりあえず年はgetYear()ではなく、getFullYear()と書くことと、getMonth()は月を0~11に変換するのでかならず1を足す必要があります。

あとは読んで字の如しですね。

 

あとは、デフォルトのロケールではなく、世界標準時(UTC)版もあります。

console.log(
    date.getUTCFullYear(),
    date.getUTCMonth() + 1,
    date.getUTCDate(),
    date.getUTCHours(),
    date.getUTCMinutes(),
    date.getUTCSeconds(),
    date.getUTCMilliseconds()
);

実際問題、デフォルトのロケール版より、こっちの方がよく使うし、こっちの方を使うべきです。

※ 詳細は後述している記事を読めばわかりますので割愛します。

JavaScriptでDateオブジェクトの日時をローカル時間へ変換する

const date = new Date();
console.log(date.toString());
出力例
Sun Apr 02 2023 23:15:50 GMT+0900 (日本標準時)

 

これまでの再掲ですが、単純にtoString()した場合はブラウザのデフォルトのロケールで日時を変換します。

JavaScriptでDateオブジェクトの日時を世界標準時(UTC)へ変換する

const date = new Date();
console.log(date.toUTCString());
出力例
Sun, 02 Apr 2023 14:15:50 GMT

 

次に、UTC(世界標準時)への変換です。

サーバーサイドでデータをやり取りするような場合は、UTCのタイムスタンプを用いるほうが都合が良い場合がほとんどです。

 

理由としてはサーバーが例えば日本にある場合で、且つ、ロケールが日本ではないブラウザでは、ロケールのタイムゾーン・オフセット値がGMT+9となるため、サーバーとずれている分が差として現れるためです。

※ より詳細な理由や、タイムゾーンを扱う方法は後述しています

JavaScriptでDateオブジェクトの日時の形式をISO形式へ変換する

JavaScriptでは、Dateオブジェクトの値をISO 8601形式へ簡単に変換できます。

const date = new Date();
console.log(date.toISOString());
出力例
2023-04-02T14:15:50.000Z

 

 
メモ
日時のISO形式とは?

ISO 8601形式は、簡潔な日時のフォーマットを規定した国際標準です。

特に、toISOString()メソッドを実行して得られる形式はUTCを「yyyy/MM/ddTHH:mm:ss.zzzZ」として表した形式となります。

  • yyyy…4桁の年
  • MM …2桁の月
  • dd …2桁の日
  • T  …1桁固定の文字「T
  • HH …2桁24時間単位の時
  • mm …2桁の分
  • ss …2桁の秒
  • zzz …3桁のミリ秒
  • Z  …1桁固定の文字「Z

 

JavaScriptの場合、文字列を用いて日時オブジェクト(Dateクラス)をインスタンス化する場合Date.parse()new Date("日時文字列")する場合)、ISO形式を経由することが推奨されています。

それ以外の形式を利用した場合、各ブラウザごとの実装差異によって正しくコンバートされないことが起こりえます。

 

なお、date.toJSON()というメソッドもこのISO形式を呼び出すように実装されており、同じ結果を得られます。

JavaScriptでDateオブジェクトの日時の形式をデフォルトのロケールを利用して変換する

const date = new Date();
console.log(date.toLocaleString());
console.log(date.toLocaleDateString());
console.log(date.toLocaleTimeString());
出力例
2023/4/2 23:15:50
2023/4/2
23:15:50

 

toLocaleString()は日時両方、toLocaleDateString()は日付のみ、toLocaleTimeString()は時刻のみを扱います。

3つとも使い方は同じのため、この記事の中では以降toLocaleString()をメインで扱います。

JavaScriptでDateオブジェクトの日時の形式を特定のロケール表記の時間に変換する

const date = new Date();
console.log(date.toLocaleString('ja-JP')); // 日本の通常の表記を使用
console.log(date.toLocaleString('en')); // en-USと同じ/12時間表記
console.log(date.toLocaleString('en-GB')); // イギリス/24時間表記
出力例
2023/4/2 23:15:50
4/2/2023, 11:15:50 PM
02/04/2023, 23:15:50

 

toLocaleString()の第一引数で「地域と言語(≒ロケール)」を指定します。

JavaScriptで指定できるロケール文字列の形式

JavaScriptのロケールとして指定できる値はIANA言語サブタブレジストリのリストに定められています。

サムネイルhttps://www.iana.org/assignments/language-subtag-registry/language-subtag-registry ... 外部サイトへアクセスwww.iana.org

 

また、w3cによる仕様は以下のページから日本語で把握できます。

サムネイルHTMLとXMLにおける言語タグHTMLのlang属性とXMLのxml:lang属性などに対する言語タグの値を組み立てる方法についての概要(日本語訳)。 ... 外部サイトへアクセスwww.w3.org

 

簡単に説明すると以下の通りに指定します。

  • (言語タブ、必須)
    • 言語サブタブ:(リスト条の定義:Type: language
    • または拡張言語サブタブ:(リスト条の定義:Type: extlang
  • (任意)用字体系サブタグ:(リスト条の定義:Type: script
  • (任意)領域サブタグ:(リスト条の定義:Type: region
  • (任意)拡張サブタグ:(-u-はUnicodeコンソーシアムによる拡張)
  • (任意)私用領域サブタグ:(-x-移行にアルファベット8文字以内で私的に利用可)

 

なお、この記事では私用領域サブタグは扱いません。

言語サブタブや拡張言語サブタグの例は以下のとおりです。

  • "ja-JP":日本で使われる日本語
  • "en":(アメリカで使われる)英語
  • "en-GB":イギリスで使われる英語
  • "en-US":アメリカで使われる英語
  • "zh-Hans":簡体字で書かれる中国語

 

また、各種ロケール文字列を調べるために使えるツールもあります。

サムネイルLanguage subtag lookup appSearch the IANA language subtag registry or list subtags by category. ... 外部サイトへアクセスr12a.github.io

 

このツールを使って例えばタイのロケール文字列を作成したい場合、Findに「thai」を指定します。

この結果からthまたはそのままThaiが指定できますが、タイ語の意味としてThaiは使うべきではない(The script tag Thai should not be used with this language tag.)ことがわかります。

JavaScriptでDateオブジェクトの日時の形式をyy/MM/dd形式に変換する

const date = new Date();
console.log(date.toLocaleString('ja-JP', {year:"2-digit", month:"2-digit", day:"2-digit"}));
出力例
23/04/02

 

toLocaleString()の第一引数でロケールを指定し、その上で、第二引数のオプションに基づき、且つ、指定した要素のみを出力させます。

ここでは、年月日を全て2桁'2-digit')で出力するように設定しています。

year'2-digit'等のオプションの解説は後述しています

JavaScriptでDateオブジェクトの時刻の形式を12時間表記/24時間表記に変換する

ロケールに続けて-u-hc-h11を付けることで、そのロケールの表記を12時間表記に変更できます

 

const date = new Date();
console.log(date.toLocaleString('ja-JP-u-hc-h11'));
console.log(date.toLocaleString('en-US-u-hc-h11'));
console.log(date.toLocaleString('en-GB-u-hc-h11'));
console.log(date.toLocaleString("ja-JP", {hour12:true}));
console.log(date.toLocaleString("en-US", {hour12:true}));
console.log(date.toLocaleString("en-GB", {hour12:true}));
console.log(date.toLocaleString('ja-JP', {hourCycle:"h11"}));
console.log(date.toLocaleString('en-US', {hourCycle:"h11"}));
console.log(date.toLocaleString('en-GB', {hourCycle:"h11"}));
出力例
2023/4/2 午後11:15:50
4/2/2023, 11:15:50 PM
02/04/2023, 11:15:50 pm
2023/4/2 午後11:15:50
4/2/2023, 11:15:50 PM
02/04/2023, 11:15:50 pm
2023/4/2 午後11:15:50
4/2/2023, 11:15:50 PM
02/04/2023, 11:15:50 pm

 

この-u-hc-h11の意味は「-u」がオプションを意味し(厳密にはUnicode Consortiumによる拡張の意味)、hcが「Hour-Cycle」(時間サイクル)という意味であり、h11が時間を0~11で表記する(12時間単位)という意味です。

ロケール名が長いのが嫌なら、オプションで指定することもできます。hourCycleというフィールドに"h11"を指定すればよいので、こっちの方がわかりやすいですね。ちなみにオプションパラメータにはhour12というのもあります。

サムネイルhttps://www.rfc-editor.org/rfc/rfc6067.txt ... 外部サイトへアクセスwww.rfc-editor.org

 

ちなみに-u-hc-11以外にも、-u-hc-12(1~12で表記する)、-u-hc-23(0~23で表記する)、-u-hc-24(1~24で表記する)というものもあります。

ただし、時刻表記は011、または、023の範囲で表記するほうが一般的であり、オプションパラメータのhour12trueなら0 ~ 11falseなら0 ~ 23の範囲に変換できます。

 

これらの優先順位は、

(オプション)hour12 > (オプション)hourCycle > (ロケールの文字列)-hc-h12

という順番です。

基本的にはhour12を使う方が便利かと思います。

 

ただオブジェクトを生成する必要があるので一長一短でしょう。また、このhourCycleが使えるのは(スマホ版・デクトップ版ともに)「Chrome 73、Edge 18、Firefox 58、Safari 13」からなので、それより古いものには対応できないため注意が必要です。

hourCycle、hour12の処理コード例
console.log(new Date(Date.UTC(2023) -  9 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hour12: true}));
console.log(new Date(Date.UTC(2023) +  2 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hour12: true}));
console.log(new Date(Date.UTC(2023) +  3 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hour12: true}));
console.log(new Date(Date.UTC(2023) + 14 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hour12: true}));
console.log(new Date(Date.UTC(2023) + 15 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hour12: true}));
console.log(new Date(Date.UTC(2023) -  9 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hour12: false}));
console.log(new Date(Date.UTC(2023) +  2 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hour12: false}));
console.log(new Date(Date.UTC(2023) +  3 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hour12: false}));
console.log(new Date(Date.UTC(2023) + 14 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hour12: false}));
console.log(new Date(Date.UTC(2023) + 15 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hour12: false}));
console.log(new Date(Date.UTC(2023) -  9 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hourCycle: "h11"}));
console.log(new Date(Date.UTC(2023) +  2 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hourCycle: "h11"}));
console.log(new Date(Date.UTC(2023) +  3 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hourCycle: "h11"}));
console.log(new Date(Date.UTC(2023) + 14 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hourCycle: "h11"}));
console.log(new Date(Date.UTC(2023) + 15 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hourCycle: "h11"}));
console.log(new Date(Date.UTC(2023) -  9 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hourCycle: "h12"}));
console.log(new Date(Date.UTC(2023) +  2 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hourCycle: "h12"}));
console.log(new Date(Date.UTC(2023) +  3 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hourCycle: "h12"}));
console.log(new Date(Date.UTC(2023) + 14 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hourCycle: "h12"}));
console.log(new Date(Date.UTC(2023) + 15 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hourCycle: "h12"}));
console.log(new Date(Date.UTC(2023) -  9 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hourCycle: "h23"}));
console.log(new Date(Date.UTC(2023) +  2 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hourCycle: "h23"}));
console.log(new Date(Date.UTC(2023) +  3 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hourCycle: "h23"}));
console.log(new Date(Date.UTC(2023) + 14 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hourCycle: "h23"}));
console.log(new Date(Date.UTC(2023) + 15 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hourCycle: "h23"}));
console.log(new Date(Date.UTC(2023) -  9 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hourCycle: "h24"}));
console.log(new Date(Date.UTC(2023) +  2 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hourCycle: "h24"}));
console.log(new Date(Date.UTC(2023) +  3 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hourCycle: "h24"}));
console.log(new Date(Date.UTC(2023) + 14 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hourCycle: "h24"}));
console.log(new Date(Date.UTC(2023) + 15 * 3600 * 1000).toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hourCycle: "h24"}));
hourCycle、hour12の処理結果例
2023/01/01 午前0:00:00
2023/01/01 午前11:00:00
2023/01/01 午後0:00:00
2023/01/01 午後11:00:00
2023/01/02 午前0:00:00
2023/01/01 0:00:00
2023/01/01 11:00:00
2023/01/01 12:00:00
2023/01/01 23:00:00
2023/01/02 0:00:00
2023/01/01 午前0:00:00
2023/01/01 午前11:00:00
2023/01/01 午後0:00:00
2023/01/01 午後11:00:00
2023/01/02 午前0:00:00
2023/01/01 午前12:00:00
2023/01/01 午前11:00:00
2023/01/01 午後12:00:00
2023/01/01 午後11:00:00
2023/01/02 午前12:00:00
2023/01/01 0:00:00
2023/01/01 11:00:00
2023/01/01 12:00:00
2023/01/01 23:00:00
2023/01/02 0:00:00
2023/01/01 24:00:00
2023/01/01 11:00:00
2023/01/01 12:00:00
2023/01/01 23:00:00
2023/01/02 24:00:00

JavaScriptで時刻の形式を12時間表記で且つ日付は年月日の漢字をつけて出力させる

console.log(date.toLocaleString('ja-JP', {dateStyle:"long"}) + " " + date.toLocaleString('ja-JP-u-hc-h11', {timeStyle:"full"}));
出力例
2023年4月2日 午後11:15:50 日本標準時

 

いきなり出ててきたdateStyletimeStyle。読んで字の如しですが、それぞれ日付のスタイルと、時刻のスタイルを指定します。

指定できる値はどちらも「"full", "long", "medium",
"short"※」です。これらを指定すると、他のオプションが混在できなかったり色々繊細なので、これは慣れたほうが早いです。

※ 次の節でも解説しています。

JavaScriptでDateオブジェクトの時刻の形式を24時間表記で且つ日付は年月日の漢字をつけて出力させる

console.log(date.toLocaleString('ja-JP', {dateStyle:"long", timeStyle:"medium"}));
console.log(date.toLocaleString('ja-JP', {dateStyle:"long", timeStyle:"full"}));
出力例
2023年4月2日 23:15:50
2023年4月2日 23時15分50秒 日本標準時

 

ここでは、「"full", "long", "medium"」を利用しています。

UIで利用する場合は、dateStyletimeStyleに「"long"または"medium"を指定する」ことで、殆どの場合で事足りるでしょう。

JavaScriptでミリ秒を付けて任意の日付と時刻を出力する

console.log(
    date.toLocaleString("ja-JP", {dateStyle:"long", timeStyle:"medium"})
        + "."
        + date.toLocaleTimeString("ja-JP", {fractionalSecondDigits:3})
);
出力例
2023年4月2日 23:15:50.000

 

ミリ秒をtoLocaleString()を用いて出力するには、ロケールとともにオプションとしてfractionalSecondDigits:nを指定します。n13の値が指定できます。

このnは数字(文字列)でも整数値(int)でも構いません。

 

なお、仕様上は0"0"が指定できるはずですが、Google Chromeの2023年4月9日最新版である112では、例外が発生します。

console.log(date.toLocaleString("ja-JP", {fractionalSecondDigits:0}));
08:38:11.732 VM3371:1 Uncaught RangeError: fractionalSecondDigits value is out of range.
    at Date.toLocaleString (<anonymous>)
    at <anonymous>:1:18

 

ちなみにdateStyletimeStyleを指定している場合fractionalSecondDigitsは同時に指定できないため、これも例外が発生します。

console.log(
    date.toLocaleString(
        "ja-JP",
        {
            dateStyle:"long",
            timeStyle:"medium",
            fractionalSecondDigits:3
        }
    )
)
出力例
Uncaught TypeError: Can't set option fractionalSecondDigits when timeStyle is used
at Date.toLocaleString (<anonymous>)
at <anonymous>:1:18

 

したがって、「JavaScriptのtoLocaleString()メソッドでミリ秒を含めた形式を出力するためには、必要なすべてのパラメータを指定しないといけない」ということになります。

console.log(
    date.toLocaleString(
        "ja-JP", {
            era: "long",
            year: "numeric",
            month: "2-digit",
            day: "2-digit",
            hour: "2-digit",
            minute: "2-digit",
            second: "2-digit",
            fractionalSecondDigits: 3
        }
    )
);
出力例
西暦2023/04/02 23:15:50.000

JavaScriptでdateオブジェクトから曜日の数値を取得する

console.log(date.getDay());
出力例
0

※ 0~6、0は日曜日
※ この値を配列のインデックスにして曜日を変換するなんてダサいことはしないでね! 様々な形式に変換できるサンプルがあるからね!

JavaScriptで日付オブジェクトから短い3桁の英語表記の曜日(半角3文字)を取得する

console.log(date.toLocaleString("en",{weekday:'short'}));
出力例
Sun

 

たったこれだけで変換できるの、意外と知られてないよね…。

JavaScriptで日付オブジェクトから長い英語表記の曜日を取得する

console.log(date.toLocaleString("en",{weekday:'long'}));
出力例
Sunday

 

長い表記もお茶の子さいさい。

JavaScriptで日付オブジェクトから長い日本語表記の曜日(全角3文字)を取得する

console.log(date.toLocaleString("ja",{weekday:'long'}));
出力例
日曜日

 

"en""ja"に変えて、weekday"long""short"を指定するだけでおk…。

JavaScriptで日付オブジェクトから短い日本語表記の曜日(全角1文字)を取得する

console.log(date.toLocaleString("ja",{weekday:'short'}));
出力例

JavaScriptの日時関連のフォーマット変換、色々便利だねぇ。でも他の言語にあるような完全にオリジナルのフォーマット変換はできないのが玉に瑕だけども…。

JavaScriptでDateオブジェクトの日付と時刻を、年を日本の元号表記、且つ元号をアルファベットで表記した形式に変換する

const date = new Date();
console.log(date.toLocaleString("ja-JP-u-ca-japanese"));
出力例
R5/4/2 23:15:50

 

令和以降に発売されたスマホなら、もうこんな簡単に新元号の対応もできちゃう。

JavaScriptで日付と時刻を、年を日本の元号表記、且つ元号や年月日を漢字で表記した形式に変換する

console.log(
    date.toLocaleString(
        "ja-JP-u-ca-japanese",
        {
            year:     'numeric',
            month:    'long',
            day:      'numeric',
            hour:     'numeric',
            minute:   'numeric',
            second:   'numeric',
        }
    )
);
出力例
令和5年4月2日 23:15:50

 

令和くんの漢字も使える。どちゃくそ便利。

JavaScriptで日本語の元号表記、且つ年月日を漢字で表記し、曜日まで付与した形式に変換する

console.log(
    date.toLocaleString(
        "ja-JP-u-ca-japanese",
        {
            year:       'numeric',
            month:      'long',
            day:        'numeric',
            hour:       'numeric',
            minute:     'numeric',
            second:     'numeric',
            weekday:    'short',
        }
    )
);
出力例
令和5年4月2日(日) 23:15:50

 

曜日もきれいに付与してくれる…JavaScriptマヤ、なんて恐ろしい

JavaScriptでDateオブジェクトの日本語の元号表記、且つ年月日を漢字で表記し、曜日まで付与し、且つ12時間表記し、時分秒の単位も漢字で付与した形式に変換する

console.log(
    date.toLocaleString(
        "ja-JP-u-ca-japanese-hc-h12",
        {
            year:       'numeric',
            month:      'long',
            day:        '2-digit',
            hour:       '2-digit',
            minute:     '2-digit',
            second:     '2-digit',
            weekday:    'short',
        }
    ).replace(":", "時").replace(":", "分") + "秒"
);
出力例
令和5年4月02日(日) 午後11時15分50秒

 

時分秒の付け方はちょっとダサいね(´・ω・`)。

JavaScriptで日付オブジェクトから別のタイムゾーンを指定して変換する

console.log(date.toLocaleString("ja-JP", {timeZone:'GMT', timeZoneName: 'short'}));
console.log(date.toLocaleString("ja-JP", {timeZone:'UTC', timeZoneName: 'short'}));
console.log(date.toLocaleString("ja-JP", {timeZone:'Asia/Tokyo', timeZoneName: 'short'}));
console.log(date.toLocaleString("en-US", {timeZone:'Asia/Taipei'}));
console.log(date.toLocaleString("af-ZA", {timeZone:'Africa/Nairobi', timeZoneName: 'long'}));
出力例
2023/4/2 14:15:50 UTC
2023/4/2 14:15:50 UTC
2023/4/2 23:15:50 JST
4/2/2023, 10:15:50 PM
2023-04-02 17:15:50 Oos-Afrika-tyd

 

timeZoneオプションを利用することで、UTC(世界標準時0時)、Asia/Tokyoなら東京のタイムゾーン(GMT+9)、Asia/Tapeiなら台北のタイムゾーン(GMT+8)、Africa/Nairobiならナイロビのタイムゾーン(GMT+3)などの変換ができます。

また、timeZoneNameを省略すると、タイムゾーンは出力されませんが、'short'を指定すると3桁のタイムゾーンが後ろに付与され、'long'を指定すれば指定したロケールでのタイムゾーン名称が出力されます。

JavaScriptでタイムゾーンのオフセットを指定して時刻を変換する

JavaScriptにはタイムゾーンのオフセット時間を指定して時刻を変換する方法はありません

 

これを無理やりやるには、

以下のようにしてutcDateにUTC+0の時刻を計算して代入しますが、…これだと身の毛がよだつコードです。

 

const utcDate = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours() + date.getTimezoneOffset() / 60, date.getUTCMinutes(), date.getUTCSeconds(), date.getUTCMilliseconds()))

date.getTimezoneOffset()はUTC表記におけるタイムゾーンのオフセット時間(分)が記録されています。Date.UTC()の4つ目の引数は、date.getUTCHours() の値に時間を加算しなければならないため、getTimezoneOffset()の値を60分の1して加算しています。…説明するのも面倒くさいよね!!!

 

この記事を理解してコーディングすれば、UTC+0の時刻は以下のように定義できます

const utcDate = new Date(new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000).toISOString())

date.getTimezoneOffset()は分数なので、60倍して秒数にし、更に1000倍してミリ秒に変換します。簡単!!

 

あとはこれにタイムゾーンのオフセット時間分のミリ秒値を加算・減算してやればすみます

const chicagoDate = new Date(utcDate - 5 * 3600 * 1000)

これでchicagoDateGMT-5のシカゴの日時が代入できているので、toLocaleString()で任意のフォーマットへ変換して出力します。

console.log(date.toLocaleString('ja-JP'));
console.log(utcDate.toLocaleString('ja-JP'));
console.log(chicagoDate.toLocaleString('ja-JP'));
出力例
2023/4/2 23:15:50
2023/4/2 14:15:50
2023/4/2 9:15:50

 

2023/04/09 追記

色々追加調査をして、タイムゾーンのオフセット時間を指定して時刻を変換する方法を発見しましたが、色々と混乱しそうなのでドキュメントを残さないでの利用はおすすめしません。

 

利用方法は簡単です。記録されている日時のタイムゾーンに関係なく、オフセット時間のマイナスの時間を'Etc/GMT~'の部分に指定するだけです。

例えば、GMT+8への変換であれば、以下のようになります。

 

console.log(date.toLocaleString("ja-JP", {dateStyle:"long", timeStyle:"long", timeZone:"Etc/GMT-8"}));
出力例
2023年4月2日 22:15:50 GMT+8

 

確かにコードとしては短くてよいのですが、「GMT-8」と指定するので一見すると「メキシコ」とか「カナダ」(どちらもGMT-8)のタイムゾーンへ変換しているように見えてしまうのが微妙です。

// このコードは、日時をGMT+8に変換します(JavaScriptの仕様で-8と指定していますが、これは正常です)

console.log(date.toLocaleString("ja-JP", {dateStyle:"long", timeStyle:"long", timeZone:"Etc/GMT-8"}));

みたいに書かないと、後からコードを読む人が混乱しそうです。

JavaScriptでDateオブジェクト!日時変換の応用的な記述サンプル

JavaScriptでyyyyMMddHHmmddzzz形式(ミリ秒付き)の文字列をワンライナーで生成する

console.log(new Date().toISOString().replace(/[^0-9]/g,''))
出力例
20230402141550000

 

なお、この値は世界標準時を用いていますので、ローカルタイム(タイムゾーン)は考慮されません(世界標準時の方が基本的には正しい指定です)。

それでもなお、ローカル時間での値が必要な場合は先述のタイムゾーンを数値で指定する例から、以下のように記述できます。

console.log(new Date(Date.now() - new Date().getTimezoneOffset() * 60000).toISOString().replace(/[^0-9]+/g, ''));
出力例
20230402231550000

 

これでも実直にgetFullYear()とかを組み合わせるより大分楽ですね。

ただし、サーバーとやり取りをする上では、UTCを用いるべきです(メモ参照)。

 
メモ
ローカル時間と世界標準時、どう使い分ける?

世界標準時(new Date().toISOString().replace(/[^0-9]/g,”))等はサーバー側へ問い合わせる際のタイムスタンプとしての利用に適しています。

対して「ローカル時間」の方は、利用者に表示したり、利用者がその値をローカル環境で利用するような用途に適します。

 

もしもタイムゾーンを考慮してしまうと、日本のサーバーと日本のクライアント(ブラウザ)では正しく動作するものの、日本にあるサーバーと日本以外にあるクライアントがやり取りを行う際に、タイムゾーン分のずれが毎回発生してしまうのです。

JavaScriptはクライアント側で実行されるわけですので、サーバーとやり取りを行うことが想定されるコードでは、UTCのまま扱うことをおすすめします。

 

もしサーバー側の時刻がUTC+0で調整していない場合でも、JavaScript側でサーバー側の時差分を加算することでこれに対応できます。

したがって、JavaScriptによるサーバー間通信においては、どんな用途でもUTCで時刻を扱うべきと言えるのです。

 

また、もしUTCの時刻(JavaScript上ではUTC+0)をサーバーのある地域に合わせて時差を含めて変換することもできます。

以下は、GMT+9の日本にあるサーバーとやり取りをすることを考慮した記述例です。

 

console.log(new Date(Date.now() + 9 * 3600000).toISOString().replace(/[^0-9]/g,""))
出力例
20230402231550000

 

こちらはブラウザ側のロケールに依存しませんし、サーバー側のロケールに合わせて調整できるので、多くの場合より適切でしょう。

JavaScriptでyyyyMMddHHmmdd形式(ミリ秒なし)の文字列をワンライナーで生成する

console.log(new Date().toISOString().replace(/\..+|[^0-9]/g,''))
console.log(new Date(Date.now() - new Date().getTimezoneOffset() * 60000).toISOString().replace(/\..+|[^0-9]+/g, ''));
console.log(new Date(Date.now() - 9 * 60000).toISOString().replace(/\..+|[^0-9]+/g, ''));
出力例
20230402141550
20230402231550
20230402231550

 

ミリ秒なしは、正規表現で「.」以降を消すことで実現します。

JavaScriptでyyyyMMdd形式(時間なし)の文字列をワンライナーで生成する

console.log(new Date().toISOString().replace(/T.*|[^0-9]/g,''))
console.log(new Date(Date.now() - new Date().getTimezoneOffset() * 60000).toISOString().replace(/T.*|[^0-9]/g,''));
console.log(new Date(Date.now() - 9 * 60000).toISOString().replace(/T.*|[^0-9]/g,''));
出力例
20230402
20230402
20230402

 

時刻なしは、正規表現で「T」以降を消すことで実現します。

toISOString()で返される文字列は、JavaScriptの文字列操作で簡単に加工できるので応用してみると良いでしょう。

JavaScriptで日時を全角の数字で出力する

ロケール文字列に-u-nu-fullwideを指定するか、オプションパラメータのnumberingSystem"fullwide"を指定することで、出力する日時を全角数値に変換させることができます。

console.log(new Date().toLocaleString("ja-JP-u-nu-fullwide", {dateStyle:"long", timeStyle:"medium"}));
出力例
2023年4月2日 23:15:50

 

ただし、timeStyle"long"を指定してタイムゾーンを出力させても、タイムゾーンは全角にはなりません。これはnumberingSystemの指定ですので、要は日時の数値形式を指定するオプションであり、タイムゾーンは範疇外のためです(これは当たり前ですよね)。

JavaScriptで日時を全角の漢字で出力する

ロケール文字列に-u-nu-hanidecを指定するか、オプションパラメータのnumberingSystem"hanidec"を指定することで、出力する日時の数字を漢字に変換させることができます。

console.log(new Date().toLocaleString("ja-JP-u-nu-hanidec", {dateStyle:"medium", timeStyle:"medium"}));
console.log(date.toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", numberingSystem:"hanidec"}));
出力例
二〇二三/〇四/〇二 二三:一五:五〇
二〇二三/〇四/〇二 二三:一五:五〇

JavaScriptでタイの書式とタイの数値の数え方を使って時刻を出力する

console.log(date.toLocaleString("th", {hour12:true, numberingSystem: "thai"}));
出力例
๒/๔/๒๕๖๖ ๑๑:๑๕:๕๐ หลังเที่ยง
JavaScriptのロケールを指定し、タイ語の形式で出力した日時をGoogle翻訳で日本語へ翻訳した結果
JavaScriptのロケールを指定し、タイ語の形式で出力した日時をGoogle翻訳で日本語へ翻訳した結果。うまく変換できています。

JavaScriptで干支(えと)や十干(じゅっかん)をワンライナーで取得する

干支(えと)・十干十二支(じゅっかんじゅうにし)・干支(かんし)・十二支とは?

まず、そもそも干支(えと)とはなんでえしょうか?

干支とは、アジア一帯で利用される特殊な暦の表現方法です。干支は正式には十干十二支(じゅっかんじゅうにし)のことであり、十干と十二支の組み合わせを用いた、60年周期の暦です。日本では、簡略化された十二支のみを主に用い、干支(えと)といえば十二支のことを指すことが一般的です。

JavaScriptで西暦から日本で使われている干支を得る

/* 来年の干支  */
console.log(new Date(Date.UTC(new Date().getUTCFullYear() + 1, 5)).toLocaleString("ja-JP-u-ca-chinese", {year:"numeric"})[1]);

/* dateの干支  */ console.log(new Date(date.getUTCFullYear(), 5).toLocaleString("ja-JP-u-ca-chinese", {year:"numeric"})[1]);
/* 去年の干支  */ console.log(new Date(new Date().getUTCFullYear() - 1, 5).toLocaleString("ja-JP-u-ca-chinese", {year:"numeric"})[1]);
/* 特定年の干支 */ console.log(new Date(Date.UTC(2021, 5)).toLocaleString("ja-JP-u-ca-chinese", {year:"numeric"})[1]);
出力例



 

ロケールに"ja-JP-u-ca-chinese"と指定し、toLocaleDateString()関数で年を変換し、その2文字目([1])を取り出すことで変換ができます。

ここで注意するのが、"ja-JP-u-ca-chinese"は「日本語で中国語ベースの旧暦を用いて表示する」という意味であることです。

 

要は、日本では新暦をベースに干支を用いるため、旧暦と新暦の年の繰り上がりを考慮しなければなりません。

ここでは面倒なことはせず、必ず年が繰り上がっている「6月」(引数の指定は5)を指定することで判定を簡略化しています(別に3・4を指定してもOK)。

JavaScriptで西暦から十干や十干十二支を得る

先程の例とほとんど同じなので解説は割愛します。

console.log(new Date(Date.UTC(new Date().getFullYear(), 5)).toLocaleString("ja-JP-u-ca-chinese", {year:"numeric"}));
console.log(new Date(Date.UTC(new Date().getFullYear(), 5)).toLocaleString("ja-JP-u-ca-chinese", {year:"numeric"})[0]);
出力例
癸卯年

JavaScriptで新暦を旧暦に変換する

単純に旧暦(陰暦)への変換は、ロケール文字列に-u-ca-chineseを追加するか、オプションパラメータcalendar"chinese"を追加します。

 

console.log(date.toLocaleString("ja-JP-u-ca-chinese"));
console.log(date.toLocaleString("ja-JP-u-ca-chinese", {dateStyle:"medium"}));
console.log(date.toLocaleString("ja-JP-u-ca-chinese", {dateStyle:"short"}));
console.log(date.toLocaleString("ja-JP", {calendar:"chinese", month:"numeric", day: "numeric"}));
出力例
癸卯-閏2-12 23:15:50
癸卯年閏二月一二日
癸卯-閏2-12
閏2/12

 

なお、旧暦の年を数値(アラビア数字)で出力する方法はありません。

ただし、簡単な関数を記述することで対応できます。

 

Date.prototype.getOldYear = function(){
    const y = this.getFullYear();
    return (
        this.toLocaleDateString("ja-JP-u-ca-chinese")[0]
            === new Date(Date.UTC(y, 0)).toLocaleDateString("ja-JP-u-ca-chinese")[0]
            ? y - 1 : y
    );
}
console.log("旧暦" + date.getOldYear() + "/" + date.toLocaleString("ja-JP", {calendar:"chinese", month:"numeric", day: "numeric"}))
出力例
旧暦2023/閏2/12

 

このコードはDateクラスに新しいメソッドであるgetOldYear()を追加し、そのメソッドを利用して旧暦の年を取得しています。

 

仕組みは、

今記憶している新暦の日時から、まず旧暦へ変換し、その結果の1桁目の文字列(十干十二支の十干の1文字が入る)と、その年の1月1日の新暦を旧暦に変換しその結果の1桁目の文字列を比較します。

その結果が合致する場合、まだ年が繰り上がっていないことが判明するため、現在の新暦の年から1減算した結果を返します。

対してその結果が合致しない場合は、既に旧暦でも年が繰り上がっている(新暦の年と旧暦の年が合致する)ため、そのまま新暦の年を返します。

 

JavaScriptなら面倒くさい実装をせずとも旧暦もある程度簡単に利用できますね。

JavaScriptのtoLocaleString()、toLocaleDateString()、toLocaleTimeString()でオプションに指定できるオプションのパラメータ一覧

女性がホワイトボードの前に立っている写真
最後にJavaScriptのDate.toLocaleString()メソッドに指定できるオプションの内容を把握しましょう。

最後に、ロケールを指定する際に必要となるオプションにおいて、指定できる項目とパラメータを一覧形式で紹介します。

  • 日付に関連するもの
    • era:紀年法(紀元・紀元前・西暦)
      • "long"
        • 出力例ja-JP西暦
        • 出力例en-USAnno Domini
        • 出力例en-GBAnno Domini
      • "short"
        • 出力例ja-JP西暦
        • 出力例en-USAD
        • 出力例en-GBAD
      • "narrow"
        • 出力例ja-JPAD
        • 出力例en-USA
        • 出力例en-GBA
    • year:年
      • "2-digit"
        • 出力例ja-JP23年
        • 出力例en-US23
        • 出力例en-GB23
      • "numeric"
        • 出力例ja-JP2023年
        • 出力例en-US2023
        • 出力例en-GB2023
    • month:月
      • "2-digit"
        • 出力例ja-JP04月
        • 出力例en-US04
        • 出力例en-GB04
      • "numeric"
        • 出力例ja-JP4月
        • 出力例en-US4
        • 出力例en-GB4
      • "short"
        • 出力例ja-JP4月
        • 出力例en-USApr
        • 出力例en-GBApr
      • "long"
        • 出力例ja-JP4月
        • 出力例en-USApril
        • 出力例en-GBApril
      • memo
        日本語の場合、month"2-digit"以外を指定し、その他のyear/day等を指定するとセパレータ記号/ではなく「年月日」が付きます。

        • {year:"numeric", month:"long"}
          • 出力例ja-JP2023年4月
          • 出力例en-USApril 2023
          • 出力例en-GBApril 2023
        • {year:"2-digit", month:"long"}
          • 出力例ja-JP23年4月
          • 出力例en-USApril 23
          • 出力例en-GBApril 23
        • {year:"numeric", month:"2-digit"}
          • 出力例ja-JP2023/04
          • 出力例en-US04/2023
          • 出力例en-GB04/2023
        • {year:"2-digit", month:"2-digit"}
          • 出力例ja-JP23/04
          • 出力例en-US04/23
          • 出力例en-GB04/23
    • day:日
      • "2-digit"

        • 出力例ja-JP02日
        • 出力例en-US02
        • 出力例en-GB02
      • "numeric"

        • 出力例ja-JP2日
        • 出力例en-US2
        • 出力例en-GB2
    • weekday:曜日
      • "long"
        • 出力例ja-JP日曜日
        • 出力例en-USSunday
        • 出力例en-GBSunday
      • "short"
        • 出力例ja-JP
        • 出力例en-USSun
        • 出力例en-GBSun
      • "narrow"
        • 出力例ja-JP
        • 出力例en-USS
        • 出力例en-GBS
  • 時間に関連するもの
    • hour:時
      • "2-digit"

        • 出力例ja-JP23時
        • 出力例en-US11 PM
        • 出力例en-GB23
      • "numeric"

        • 出力例ja-JP23時
        • 出力例en-US11 PM
        • 出力例en-GB23
    • minute:分
      • "2-digit"

        • 出力例ja-JP15
        • 出力例en-US15
        • 出力例en-GB15
      • "numeric"

        • 出力例ja-JP15
        • 出力例en-US15
        • 出力例en-GB15
    • second:秒
      • "2-digit":先頭0埋めの2桁を強制する

        • 出力例ja-JP50
        • 出力例en-US50
        • 出力例en-GB50
      • "numeric":先頭0埋めをしない

        • 出力例ja-JP50
        • 出力例en-US50
        • 出力例en-GB50
    • fractionalSecondDigits:ミリ秒の桁指定
      • "1""3"、または、03:ミリ秒の出力桁数

        • 出力例ja-JP000
        • 出力例en-US000
        • 出力例en-GB000
  • 自動的に書式を指定できるもの
    • dateStyle:日付の書式を指定する
      • "full":曜日を含め最も長い形式を採用する

        • 出力例ja-JP
        • 出力例en-US
        • 出力例en-GB
      • "long":曜日含めず、最も長い形式を採用する

        • 出力例ja-JP
        • 出力例en-US
        • 出力例en-GB
      • "medium":比較的短い形式を採用する(日本語は先頭0埋めされる)

        • 出力例ja-JP2023/04/02
        • 出力例en-USApr 2, 2023
        • 出力例en-GB2 Apr 2023
      • "short"

        • 出力例ja-JP2023/04/02
        • 出力例en-US4/2/23
        • 出力例en-GB02/04/2023
    • timeStyle:時刻の書式を指定する
      • "full":時刻を長い形式で、且つ、タイムゾーンも長い形式で出力する

        • 出力例ja-JP23時15分50秒 日本標準時
        • 出力例en-US11:15:50 PM Japan Standard Time
        • 出力例en-GB23:15:50 Japan Standard Time
      • "long":時刻を長い形式で、且つ、タイムゾーンは短い形式で出力する。

        • 出力例ja-JP23:15:50 JST
        • 出力例en-US11:15:50 PM GMT+9
        • 出力例en-GB23:15:50 GMT+9
      • "medium":時刻を短い形式で、且つ、タイムゾーン無しで出力する(分・秒は0埋めされる)

        • 出力例ja-JP9:03:02※時の先頭0は欠落する
        • 出力例en-US9:03:02 AM※時の先頭0は欠落する
        • 出力例en-GB09:03:02※時は0埋めされる
      • "short":時刻を短い形式で、且つ、秒を省き、タイムゾーン無しで出力する(分は0埋めされる)

        • 出力例ja-JP9:03※時の先頭0は欠落する
        • 出力例en-US9:03 AM※時の先頭0は欠落する
        • 出力例en-GB09:03※時は0埋めされる
    • memodateStyle及びtimeStyleを指定した場合、上述の「日付に関連するもの」及び「時間に関連するもの」を同時に指定できない
  • オプションパラメータ、または、ロケール文字列でも指定が可能なもの
    • calendar:特定の暦に準拠して出力する
        • パラメタ:calendar
          • コード例:console.log(date.toLocaleString("ja-JP", {dateStyle:"long", timeStyle:"long", calendar:"japanese"}));
          • 出力例ja-JP令和5年4月2日 23:15:50 JST
          • 出力例en-USApril 2, 5 Reiwa at 11:15:50 PM GMT+9
          • 出力例en-GBApril 2, 5 Reiwa at 23:15:50 GMT+9
        • ロケール:ca
          • コード例:console.log(date.toLocaleString("ja-JP-u-ca-japanese", {dateStyle:"long", timeStyle:"medium"}));
          • 出力例ja-JP令和5年4月2日 23:15:50 JST
          • 出力例en-USApril 2, 5 Reiwa at 11:15:50 PM GMT+9
          • 出力例en-GBApril 2, 5 Reiwa at 23:15:50 GMT+9
        • 指定可能な値
          • 'buddhist':仏滅紀元(仏暦)
          • 'chinese':中国歴(旧暦・陰暦)
          • 'coptic':コプト歴(旧エジプト)
          • 'ethiopia':エチオピア暦
          • 'ethiopic':エチオピア暦
          • 'gregory':グレゴリオ暦
          • 'hebrew':ユダヤ暦
          • 'indian':インド国定暦
          • 'islamic':ヒジュラ暦(イスラム暦)
          • 'iso8601':ISO 8601へ変換する
          • 'japanese':和暦
          • 'persian':ペルシア暦(イラン暦)
          • 'roc':中華民国暦(台湾ほか)
    • numberingSystem:特定地域の命数法に準拠する
        • パラメタ:numberingSystem
          • コード例:console.log(date.toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", numberingSystem:"fullwide"}));
          • 出力例ja-JP2023/04/02 23:15:50
          • 出力例en-USApr 2, 2023, 11:15:50 PM
          • 出力例en-GB2 Apr 2023, 23:15:50
        • ロケール:nu
          • コード例:console.log(date.toLocaleString("ja-JP-u-nu-fullwide", {dateStyle:"medium", timeStyle:"medium"}));
          • 出力例ja-JP2023/04/02 23:15:50
          • 出力例en-USApr 2, 2023, 11:15:50 PM
          • 出力例en-GB2 Apr 2023, 23:15:50
        • 指定可能な値
          • 'arab':インド数字(アラビア数字、ヒンディー数字、アラビア・インド数字)
          • 'arabext':拡張インド数字
          • 'bali':バリ文字(インドネシアのバリ島で使用)
          • 'beng':ベンガル文字
          • 'deva':デーヴァナーガリー(インド、ヒンディー語、サンスクリット語等)
          • 'fullwide':日本語全角数値
          • 'gujr':グジャラーティー文字(インド、グジャラート語)
          • 'guru':グルムキー文字(インド、パンジャーブ語)
          • 'hanidec':漢数字
          • 'khmr':クメール文字(カンボジア、クメール語)
          • 'knda':カンナダ文字(インド、カンナダ語)
          • 'laoo':ラオス文字(ラーオ語、タイ・カダイ語、ラオス公用語)
          • 'latn':ラテン文字(ローマ字、欧字)
          • 'limb':リンブ文字
          • 'mlym':マラヤーラム文字(インド、マラヤーラム語)
          • 'mong':モンゴル文字
          • 'mymr':ビルマ文字(ミャンマー、ビルマ語)
          • 'orya':突厥文字(とっけつもじ、オルホン文字、古テュルク語)
          • 'tamldec':タミル語(インド、タミル語)
          • 'telu':テルグ文字(インド、テルグ語)
          • 'thai':タイ文字(タイ語、シャム文字)
          • 'tibt':チベット文字(チベット語、ゾンカ語)
    • hour12:0~11時間表記にするか、0~23時間表記にする
        • パラメタ:hour12
          • コード例:console.log(date.toLocaleString("ja-JP", {dateStyle:"medium", timeStyle:"medium", hour12:true}));
          • 出力例ja-JP2023/04/02 午後11:15:50
          • 出力例en-US2, 2023, 11:15:50 PM
          • 出力例en-GB2 Apr 2023, 11:15:50 pm
        • ロケール:相当のロケールは存在しないが、hourCycleh11またはh23相当の挙動を取る
        • memo: 指定できる値はfalseまたは0か、それ以外であることに注意。
          • false2023/04/02 23:15:50
          • true2023/04/02 午後11:15:50
          • 02023/04/02 23:15:50
          • 12023/04/02 午後11:15:50
          • "0"2023/04/02 午後11:15:50
          • "1"2023/04/02 午後11:15:50
          • "true"2023/04/02 午後11:15:50
          • "fase"2023/04/02 午後11:15:50
          • "yes"2023/04/02 午後11:15:50
          • "no"2023/04/02 午後11:15:50
    • hourCycle:時間のサイクルを指定する
        • パラメタ:hourCycle
          • "h11"0 ~ 11時間表記にする
          • "h12"1 ~ 12時間表記にする
          • "h23"0 ~ 23時間表記にする
          • "h24"1 ~ 24時間表記にする
        • ロケール:-hc
          • "h11"0 ~ 11時間表記にする
          • "h12"1 ~ 12時間表記にする
          • "h23"0 ~ 23時間表記にする
          • "h24"1 ~ 24時間表記にする
  • timeZone:タイムゾーンに関連するもの

    • timeZone:タイムゾーンを指定する

      • コード例:console.log(date.toLocaleString("ja-JP", {timeZone:'asia/Tokyo'}));
      • 出力例ja-JP
      • 出力例en-US
      • 出力例en-GB
      • タイムゾーンに指定可能な文字列一覧
        Africa/Algiers
        Atlantic/Cape_Verde
        Africa/Ndjamena
        Africa/Abidjan
        Africa/Cairo
        Africa/Bissau
        Africa/Nairobi
        Africa/Monrovia
        Africa/Tripoli
        Indian/Mauritius
        Africa/Casablanca
        Africa/El_Aaiun
        Africa/Maputo
        Africa/Windhoek
        Africa/Lagos
        Africa/Sao_Tome
        Africa/Johannesburg
        Africa/Khartoum
        Africa/Juba
        Africa/Tunis
        Antarctica/Casey
        Antarctica/Davis
        Antarctica/Mawson
        Antarctica/Troll
        Antarctica/Rothera
        Asia/Kabul
        Asia/Yerevan
        Asia/Baku
        Asia/Dhaka
        Asia/Thimphu
        Indian/Chagos
        Asia/Yangon
        Asia/Shanghai
        Asia/Urumqi
        Asia/Hong_Kong
        Asia/Taipei
        Asia/Macau
        Asia/Nicosia
        Asia/Famagusta
        Asia/Tbilisi
        Asia/Dili
        Asia/Kolkata
        Asia/Jakarta
        Asia/Pontianak
        Asia/Makassar
        Asia/Jayapura
        Asia/Tehran
        Asia/Baghdad
        Asia/Jerusalem
        Asia/Tokyo
        Asia/Amman
        Asia/Almaty
        Asia/Qyzylorda
        Asia/Qostanay
        Asia/Aqtobe
        Asia/Aqtau
        Asia/Atyrau
        Asia/Oral
        Asia/Bishkek
        Asia/Seoul
        Asia/Pyongyang
        Asia/Beirut
        Asia/Kuching
        Indian/Maldives
        Asia/Hovd
        Asia/Ulaanbaatar
        Asia/Choibalsan
        Asia/Kathmandu
        Asia/Karachi
        Asia/Gaza
        Asia/Hebron
        Asia/Manila
        Asia/Qatar
        Asia/Riyadh
        Asia/Singapore
        Asia/Colombo
        Asia/Damascus
        Asia/Dushanbe
        Asia/Bangkok
        Asia/Ashgabat
        Asia/Dubai
        Asia/Samarkand
        Asia/Tashkent
        Asia/Ho_Chi_Minh
        Australia/Darwin
        Australia/Perth
        Australia/Eucla
        Australia/Brisbane
        Australia/Lindeman
        Australia/Adelaide
        Australia/Hobart
        Australia/Melbourne
        Australia/Sydney
        Australia/Broken_Hill
        Australia/Lord_Howe
        Antarctica/Macquarie
        Pacific/Fiji
        Pacific/Gambier
        Pacific/Marquesas
        Pacific/Tahiti
        Pacific/Guam
        Pacific/Tarawa
        Pacific/Kanton
        Pacific/Kiritimati
        Pacific/Kwajalein
        Pacific/Kosrae
        Pacific/Nauru
        Pacific/Noumea
        Pacific/Auckland
        Pacific/Chatham
        Pacific/Rarotonga
        Pacific/Niue
        Pacific/Norfolk
        Pacific/Palau
        Pacific/Port_Moresby
        Pacific/Bougainville
        Pacific/Pitcairn
        Pacific/Pago_Pago
        Pacific/Apia
        Pacific/Guadalcanal
        Pacific/Fakaofo
        Pacific/Tongatapu
        Pacific/Efate
        Africa/Accra
        Africa/Addis_Ababa
        Africa/Asmara
        Africa/Bamako
        Africa/Bangui
        Africa/Banjul
        Africa/Blantyre
        Africa/Brazzaville
        Africa/Bujumbura
        Africa/Conakry
        Africa/Dakar
        Africa/Dar_es_Salaam
        Africa/Djibouti
        Africa/Douala
        Africa/Freetown
        Africa/Gaborone
        Africa/Harare
        Africa/Kampala
        Africa/Kigali
        Africa/Kinshasa
        Africa/Libreville
        Africa/Lome
        Africa/Luanda
        Africa/Lubumbashi
        Africa/Lusaka
        Africa/Malabo
        Africa/Maseru
        Africa/Mbabane
        Africa/Mogadishu
        Africa/Niamey
        Africa/Nouakchott
        Africa/Ouagadougou
        Africa/Porto-Novo
        Africa/Timbuktu
        America/Anguilla
        America/Antigua
        America/Argentina/ComodRivadavia
        America/Aruba
        America/Atikokan
        America/Blanc-Sablon
        America/Cayman
        America/Coral_Harbour
        America/Creston
        America/Curacao
        America/Dominica
        America/Ensenada
        America/Grenada
        America/Guadeloupe
        America/Montreal
        America/Montserrat
        America/Nassau
        America/Nipigon
        America/Pangnirtung
        America/Port_of_Spain
        America/Rainy_River
        America/Rosario
        America/St_Kitts
        America/St_Lucia
        America/St_Thomas
        America/St_Vincent
        America/Thunder_Bay
        America/Tortola
        America/Yellowknife
        Antarctica/DumontDUrville
        Antarctica/McMurdo
        Antarctica/Syowa
        Antarctica/Vostok
        Asia/Aden
        Asia/Bahrain
        Asia/Brunei
        Asia/Chongqing
        Asia/Hanoi
        Asia/Harbin
        Asia/Kashgar
        Asia/Kuala_Lumpur
        Asia/Kuwait
        Asia/Muscat
        Asia/Phnom_Penh
        Asia/Tel_Aviv
        Asia/Vientiane
        Atlantic/Jan_Mayen
        Atlantic/Reykjavik
        Atlantic/St_Helena
        Australia/Currie
        Europe/Amsterdam
        Europe/Belfast
        Europe/Copenhagen
        Europe/Guernsey
        Europe/Isle_of_Man
        Europe/Jersey
        Europe/Ljubljana
        Europe/Luxembourg
        Europe/Monaco
        Europe/Oslo
        Europe/Sarajevo
        Europe/Skopje
        Europe/Stockholm
        Europe/Tiraspol
        Europe/Uzhgorod
        Europe/Vaduz
        Europe/Zagreb
        Europe/Zaporozhye
        Indian/Antananarivo
        Indian/Christmas
        Indian/Cocos
        Indian/Comoro
        Indian/Kerguelen
        Indian/Mahe
        Indian/Mayotte
        Indian/Reunion
        Pacific/Chuuk
        Pacific/Enderbury
        Pacific/Funafuti
        Pacific/Johnston
        Pacific/Majuro
        Pacific/Midway
        Pacific/Pohnpei
        Pacific/Saipan
        Pacific/Wake
        Pacific/Wallis
        Etc/UTC
        Etc/GMT
        Etc/GMT-14
        Etc/GMT-13
        Etc/GMT-12
        Etc/GMT-11
        Etc/GMT-10
        Etc/GMT-9
        Etc/GMT-8
        Etc/GMT-7
        Etc/GMT-6
        Etc/GMT-5
        Etc/GMT-4
        Etc/GMT-3
        Etc/GMT-2
        Etc/GMT-1
        Etc/GMT+1
        Etc/GMT+2
        Etc/GMT+3
        Etc/GMT+4
        Etc/GMT+5
        Etc/GMT+6
        Etc/GMT+7
        Etc/GMT+8
        Etc/GMT+9
        Etc/GMT+10
        Etc/GMT+11
        Etc/GMT+12
        Europe/London
        Europe/Dublin
        WET
        CET
        MET
        EET
        Europe/Tirane
        Europe/Andorra
        Europe/Vienna
        Europe/Minsk
        Europe/Brussels
        Europe/Sofia
        Europe/Prague
        Atlantic/Faroe
        America/Danmarkshavn
        America/Scoresbysund
        America/Nuuk
        America/Thule
        Europe/Tallinn
        Europe/Helsinki
        Europe/Paris
        Europe/Berlin
        Europe/Gibraltar
        Europe/Athens
        Europe/Budapest
        Europe/Rome
        Europe/Riga
        Europe/Vilnius
        Europe/Malta
        Europe/Chisinau
        Europe/Warsaw
        Europe/Lisbon
        Atlantic/Azores
        Atlantic/Madeira
        Europe/Bucharest
        Europe/Kaliningrad
        Europe/Moscow
        Europe/Simferopol
        Europe/Astrakhan
        Europe/Volgograd
        Europe/Saratov
        Europe/Kirov
        Europe/Samara
        Europe/Ulyanovsk
        Asia/Yekaterinburg
        Asia/Omsk
        Asia/Barnaul
        Asia/Novosibirsk
        Asia/Tomsk
        Asia/Novokuznetsk
        Asia/Krasnoyarsk
        Asia/Irkutsk
        Asia/Chita
        Asia/Yakutsk
        Asia/Vladivostok
        Asia/Khandyga
        Asia/Sakhalin
        Asia/Magadan
        Asia/Srednekolymsk
        Asia/Ust-Nera
        Asia/Kamchatka
        Asia/Anadyr
        Europe/Belgrade
        Europe/Madrid
        Africa/Ceuta
        Atlantic/Canary
        Europe/Zurich
        Europe/Istanbul
        Europe/Kyiv
        Factory
        EST
        MST
        HST
        EST5EDT
        CST6CDT
        MST7MDT
        PST8PDT
        America/New_York
        America/Chicago
        America/North_Dakota/Center
        America/North_Dakota/New_Salem
        America/North_Dakota/Beulah
        America/Denver
        America/Los_Angeles
        America/Juneau
        America/Sitka
        America/Metlakatla
        America/Yakutat
        America/Anchorage
        America/Nome
        America/Adak
        Pacific/Honolulu
        America/Phoenix
        America/Boise
        America/Indiana/Indianapolis
        America/Indiana/Marengo
        America/Indiana/Vincennes
        America/Indiana/Tell_City
        America/Indiana/Petersburg
        America/Indiana/Knox
        America/Indiana/Winamac
        America/Indiana/Vevay
        America/Kentucky/Louisville
        America/Kentucky/Monticello
        America/Detroit
        America/Menominee
        America/St_Johns
        America/Goose_Bay
        America/Halifax
        America/Glace_Bay
        America/Moncton
        America/Toronto
        America/Winnipeg
        America/Regina
        America/Swift_Current
        America/Edmonton
        America/Vancouver
        America/Dawson_Creek
        America/Fort_Nelson
        America/Iqaluit
        America/Resolute
        America/Rankin_Inlet
        America/Cambridge_Bay
        America/Inuvik
        America/Whitehorse
        America/Dawson
        America/Cancun
        America/Merida
        America/Matamoros
        America/Monterrey
        America/Mexico_City
        America/Ciudad_Juarez
        America/Ojinaga
        America/Chihuahua
        America/Hermosillo
        America/Mazatlan
        America/Bahia_Banderas
        America/Tijuana
        America/Barbados
        America/Belize
        Atlantic/Bermuda
        America/Costa_Rica
        America/Havana
        America/Santo_Domingo
        America/El_Salvador
        America/Guatemala
        America/Port-au-Prince
        America/Tegucigalpa
        America/Jamaica
        America/Martinique
        America/Managua
        America/Panama
        America/Puerto_Rico
        America/Miquelon
        America/Grand_Turk
        America/Argentina/Buenos_Aires
        America/Argentina/Cordoba
        America/Argentina/Salta
        America/Argentina/Tucuman
        America/Argentina/La_Rioja
        America/Argentina/San_Juan
        America/Argentina/Jujuy
        America/Argentina/Catamarca
        America/Argentina/Mendoza
        America/Argentina/San_Luis
        America/Argentina/Rio_Gallegos
        America/Argentina/Ushuaia
        America/La_Paz
        America/Noronha
        America/Belem
        America/Santarem
        America/Fortaleza
        America/Recife
        America/Araguaina
        America/Maceio
        America/Bahia
        America/Sao_Paulo
        America/Campo_Grande
        America/Cuiaba
        America/Porto_Velho
        America/Boa_Vista
        America/Manaus
        America/Eirunepe
        America/Rio_Branco
        America/Santiago
        America/Punta_Arenas
        Pacific/Easter
        Antarctica/Palmer
        America/Bogota
        America/Guayaquil
        Pacific/Galapagos
        Atlantic/Stanley
        America/Cayenne
        America/Guyana
        America/Asuncion
        America/Lima
        Atlantic/South_Georgia
        America/Paramaribo
        America/Montevideo
        America/Caracas

         
        注意
        Chrome 112において、”Asia/Hanoi”はIANAにて定義されていますが、エラーが出ます。
    • timeZoneName:タイムゾーン名の出力方法を指定する

      • コード例:console.log(date.toLocaleString("ja-JP", {timeZoneName:"short"}));
      • 出力例ja-JP2023/4/2 23:15:50 JST
      • 出力例en-US4/2/2023, 11:15:50 PM GMT+9
      • 出力例en-GB02/04/2023, 23:15:50 GMT+9
      • 指定可能な値
        • 'long':長いタイムゾーン名を出力する
        • 'short':短いタイムゾーン名を出力する

 

サムネイルIntl.DateTimeFormat() コンストラクター - JavaScript | MDNIntl.DateTimeFormat() コンストラクターは、言語に応じた日付と時刻の書式化を可能にする Intl.DateTimeFormat オブジェクトを生成します。 ... 外部サイトへアクセスdeveloper.mozilla.org

最後に

この記事はめちゃめちゃ長くなりました。

でも、色々と参考になるコードがてんこ盛りになったので満足です。

今すぐ全部を読む必要はありません。ぜひ今はブックマークだけをしておいて、日付関連でやりたいことが出たときにでも見直してくださればと思います。

関連記事

サムネイルUTCとGMTとJSTの違いは?原子時計~クオーツ時計まで体系的に解説!うるう秒の謎が分かった!UTC(協定世界時)とGMT(世界標準時)の違いはご存知でしょうか。そして日本で使われているJSTとの関係はなんでしょうか。これらの違いを解説し、UTCの特徴である「うるう秒」の謎、クオーツ時計や原子時計まで体系的に解説します! ... 続きを読むganohr.net2017-03-01

WordPressの不具合対応/カスタマイズ¥15,000~

PC歴25年超、SE歴10年超、WordPress運営歴7年超、WordPressエンジニア歴5年超のスキルとノウハウを提供します

当サイト管理人の「ガノー」(Ganohr)は、日本最大手且つ東証一部上場企業が運営するクラウドソーシングサイト『Lancers』にて、認定ランサーとして活動しています。


※ 認定ランサーとはLancersにより様々な能力 ( 高い仕事遂行率・高い顧客満足度・多くの実績、など ) を評価したプロフェッショナルを認定する制度です。

 

JavaScriptカテゴリの最新記事