JavaScriptで日付(Date)をフォーマットする3つの方法

JavaScriptでは現在の日時とか特定の日時をDateオブジェクトを使って作成できます。

例えば現在日時のDateオブジェクトを作るなら次のような感じ

このDateオブジェクトで取得した日時を 2018/01/07  みたいに特定の形式(フォーマット)で表示したいことってありますよね?

そういう時に役立つJavaScriptで日付をフォーマットする方法をできるだけ考えてみました。ここではやり方とコード例について紹介します。

方法1.toLocaleStringメソッドを使う

まず1つめの方法は Date.toLocaleString  メソッドを使うやり方

これはで言語別に決まった形式でフォーマットするために用意されているDateオブジェクトのメソッドです。ただし細かいフォーマット指定はできません。

 

例えば次が日本語で現在日時をフォーマット表示しているコード例

コメントにも書いたように 1/4/2019, 3:43:06 AM  みたいな感じの形式で表示されます。

 

ちなみに次コードみたく 'ja-JP-u-ca-japanese'  という引数を渡せば元号表示も可能

上コードみたいに西暦31年なら元号なしで 31/1/4  みたいに表示できます。

まあ元号で表示してもあんまりメリットはないので使うことはないですね・・・あとフォーマットを細かく指定できないので toLocaleString  は役に立つ場面は少ないかもしれません。

方法2.テンプレートリテラルを使う

日時のフォーマットならテンプレートリテラルを使う、というのが一番最適です。

テンプレートリテラルって何?」という方は次記事で詳しく説明したので、まずはそちらをチェック

JavaScriptで複数行文字列を代入する一番簡単な方法

上記事で紹介したように複数行の文字列を定義できる優れもの。しかも文字列中に変数を埋め込んで展開させることもできるので、日時のフォーマットに使うことができます。

 

例えばテンプレートリテラルで日時をフォーマットしているコード例は次の通り

このコードだと少し分かりにくいですが、現在の年月日を取得して ${}  で囲むことで 2019-1-4  みたいな形式でフォーマット表示しています。(あとムダな改行を正規表現で削除)

ちなみにDateオブジェクトで日時を調べる方法は次でまとめたので、そちらをどうぞ

上コードだと年月日だけですが何時何分何秒のように時刻も自由にフォーマット可能です。

 

あとテンプレートリテラルを使った場合、日付などを0埋めすることもできます。

例えば次が月と日にちを0埋めしているコード例

JavaScriptでの数値の0埋めのやり方は次記事で説明しましたが、それを応用してます。

JavaScriptで数値を0埋めして表示する方法とコード例

0埋めすれば整った形になるので日付をフォーマットするのに便利かも

 

こういう風に日時をフォーマットするならテンプレートリテラルを使うのが最適ですね。自分で形式が決められるので自由な形でフォーマットできます。

日付だけでなく何かをフォーマットするならテンプレートリテラルが一番かもしれません。

方法3.Jquery UI のデータピッカーを使う

Jquery UI を使っている場合は datepicker  を使うことでも年月日までならフォーマットすることが可能です。あまりオススメできないですが、一応この方法でもできたので紹介します。

 

例えば次が datepicker  で日時をフォーマットしているコード例

formatDate  というメソッドに YY-M-dd  みたいな日付フォーマット(詳しくは DatePickerのリファレンス 参照)とDateオブジェクトを渡せばフォーマットされた文字列が返ってくるみたいです。

ただしこの方法が使えるのは年月日に限定される点に注意。時刻までフォーマットするなら先ほど紹介したテンプレートリテラルを使うのが確実です。

ここまでのまとめ

日時をフォーマットする方法をまとめると次の通り

  • Date.toLocaleStringメソッドを使う
    このメソッドをフォーマットしたいDateオブジェクトに対して呼び出せば 1/4/2019, 3:43:06 AM  みたいな形式で取得可。ただし細かいフォーマットは指定できない
  • テンプレートリテラルを使う
    変数を ${}  で囲めば展開できるので好きな形式でフォーマット可能。また工夫すれば 2019-01-04  みたいに0埋めすることもできる
  • Jquery UI のデータピッカーを使う
    datepicker.formatDate  メソッドに日付フォーマットとDateオブジェクトを渡すことでフォーマットされた文字列が取得できる。ただし対応しているのは年月日まで

ここまでで3つの方法を紹介しましたが、テンプレートリテラルを使うのが一番ですね。toLocaleStringメソッドは好きな形式にできないのであまり役立ちません。

以上日時をフォーマットする方法についてまとめました。