JavaScriptで日付（Date）をフォーマットする３つの方法

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

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

/** 現在日時を取得 */
var today = new Date();

1 2	/** 現在日時を取得 */ var today = new Date();

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

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

このページの目次

方法１．toLocaleStringメソッドを使う
方法２．テンプレートリテラルを使う
方法３．Jquery UI のデータピッカーを使う
ここまでのまとめ

方法１．toLocaleStringメソッドを使う

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

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

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

var today = new Date();
var formatted = today.toLocaleString('ja-JP');
console.log(formatted);
  /// => 1/4/2019, 3:43:06 AM

var today = new Date();

var formatted = today.toLocaleString('ja-JP');

console.log(formatted);

/// => 1/4/2019, 3:43:06 AM

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

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

var today = new Date();
var formatted = today.toLocaleString('ja-JP-u-ca-japanese');
console.log(formatted);
  /// => 31/1/4 12:41:28

var today = new Date();

var formatted = today.toLocaleString('ja-JP-u-ca-japanese');

console.log(formatted);

/// => 31/1/4 12:41:28

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

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

方法２．テンプレートリテラルを使う

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

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

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

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

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

/** 現在のDateオブジェクト作成 */
var d = new Date();

/** 文字列に日付をフォーマットする */
var formatted = `
${d.getFullYear()}-
${d.getMonth()+1}-
${d.getDate()}
`.replace(/\n|\r/g, '');

console.log(formatted);
  /// => 2019-1-4

/** 現在のDateオブジェクト作成 */

var d = new Date();

/** 文字列に日付をフォーマットする */

var formatted = `

${d.getFullYear()}-

${d.getMonth()+1}-

${d.getDate()}

`.replace(/\n|\r/g, '');

console.log(formatted);

/// => 2019-1-4

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

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

PisukeCode - Web開発まとめ

JavaScriptでの現在日時の調べ方とコード例まとめ

https://pisuke-code.com/js-getting-date-time-methods

JavaScriptでは次のようにDateオブジェクト（オプションなし）を作成し、そのメソッドにアクセスすることで現在の年月日や時刻などを調べられます。/** 現在のDateオブジェクトを作成 */var today = new Date();上コードみたいにオブジェクトを作成して日時取得用のメソッドを呼び出すだけなんですが、これが意外と忘れやすいんですよね。そこでDateオブジェクトから現在の年月日・時刻を調べる方法（メソッド）をまとめました。getFullYear() - 年（西暦）を返す現在年（西暦）の取得には Date.getFullYear メソッドを使います。その...

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

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

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

/** 現在のDateオブジェクト作成 */
var d = new Date();

/** 日付を文字列にフォーマットする */
var formatted = `
${d.getFullYear()}-
${(d.getMonth()+1).toString().padStart(2, '0')}-
${d.getDate().toString().padStart(2, '0')}
`.replace(/\n|\r/g, '');

console.log(formatted);
  /// => 2019-01-04

/** 現在のDateオブジェクト作成 */

var d = new Date();

/** 日付を文字列にフォーマットする */

var formatted = `

${d.getFullYear()}-

${(d.getMonth()+1).toString().padStart(2, '0')}-

${d.getDate().toString().padStart(2, '0')}

`.replace(/\n|\r/g, '');

console.log(formatted);

/// => 2019-01-04

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

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

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

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

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

方法３．Jquery UI のデータピッカーを使う

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

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

var today = new Date(Date.now());
var formatted = $.datepicker.formatDate( "yy-M-dd D", today);
console.log(formatted);
  /// 2019-Jan-04 Fri

var today = new Date(Date.now());

var formatted = $.datepicker.formatDate( "yy-M-dd D", today);

console.log(formatted);

/// 2019-Jan-04 Fri

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

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

ここまでのまとめ

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

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