JavaScriptのformatDate関数で日付フォーマット変換！YYYY-MM-DDも対応可！

JavaScriptのformatDate関数で日付フォーマットを変換する方法について知りたいときはないでしょうか。

ですよね。

今回はそんなお悩みを解決する

についてまとめます！

JavaScriptのformatDate関数について

JavaScriptのformatDate関数について説明をします。

JavaScriptのformatDate関数は、日付フォーマットを変換する目的で作成したオリジナルの関数です。

JavaScriptには、Dateオブジェクトを使用して、日付を表示するための様々な方法がありますが、getFullYear()などこれまでよく使われる日付関連メソッドに加え、toLocaleDateString()メソッドなどでより簡略化できるメソッドを使い、formatDate関数として定義していきます。

関数にすることよりフォーマットの型を指定することなく日付データを受け渡すだけで日付データを希望の型に変換することができます。

JavaScriptのformatDate関数で日付フォーマットの変換をする方法

JavaScriptのformatDate関数で日付フォーマットの変換をする方法ついてパターン別に説明をします。

YYYY-MM-DD形式で出力する

YYYY-MM-DDのフォーマット形式で日付を出力してみましょう。

この関数は、引数として渡されたDateオブジェクトを、YYYY-MM-DD形式の文字列にフォーマットして返します。

内部的には、getFullYear()、getMonth()、getDate()メソッドを使用して、年、月、日を取得しています。

月と日は、slice()メソッドを使用して、’0’を先頭に追加して2桁になるようにし、slice(-2)で後ろから2桁を取得しています。

サンプルコード

function formatDate(date) {
  const year = date.getFullYear();
  const month = ('0' + (date.getMonth() + 1)).slice(-2);
  const day = ('0' + date.getDate()).slice(-2);
  return `${year}-${month}-${day}`;
}

const today = new Date();
const formattedDate = formatDate(today);
console.log(formattedDate); 

結果

本日が”2023/05/02″なのでその結果が返ります。

YYYYMMDD形式で出力する

次はYYYYMMDDのフォーマット形式で日付を出力してみましょう。

この関数は、引数として渡されたDateオブジェクトを、YYYYMMDD形式の文字列にフォーマットして返します。

内部的には、getFullYear()、getMonth()、getDate()メソッドを使用して、年、月、日を取得しています。

月と日は、slice()メソッドを使用して、’0’を先頭に追加して2桁になるようにし、slice(-2)で後ろから2桁を取得しています。

サンプルコード

function formatDate(date) {
  const year = date.getFullYear();
  const month = ('0' + (date.getMonth() + 1)).slice(-2);
  const day = ('0' + date.getDate()).slice(-2);
  return `${year}${month}${day}`;
}

const today = new Date();
const formattedDate = formatDate(today);
console.log(formattedDate); 

結果

本日が”2023/05/02″なのでその結果が返ります。

タカヒロ

上記の出力パターンからハイフン「-」を消しただけの処理内容となります。

YYYY/MM/DD形式で出力する

YYYY/MM/DDの形式で日付を出力するには、toLocaleDateString()メソッドに引数として’ja-JP’と{ year: ‘numeric’, month: ‘2-digit’, day: ‘2-digit’ }を渡します。

これは、日本語のロケールを使用し、年は数値、月と日は2桁の数値で表示するためのオプションを指定します。

日付の区切り文字として/を使用するため、フォーマットを行う前に区切り文字は指定をする必要はありません。

サンプルコード

function formatDate(date) {
  const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
  return date.toLocaleDateString('ja-JP', options);
}

const today = new Date();
const formattedDate = formatDate(today);
console.log(formattedDate); 

結果

出力結果です。

本日が”2023/05/02″なのでその結果が返ります。

YYYY/MM/DD hh:mm:ss形式で出力する

YYYY/MM/DD hh:mm:ssの形式で日付を出力するには、toLocaleString()メソッドに引数として’ja-JP’と{ year: ‘numeric’, month: ‘2-digit’, day: ‘2-digit’, hour: ‘2-digit’, minute: ‘2-digit’, second: ‘2-digit’ }を渡します。

これは、日本語のロケールを使用し、年は数値、月と日は2桁の数値、時分秒は2桁の数値で表示するためのオプションオブジェクトになります。

なお、日付と時刻の区切り文字として/を使用するため、フォーマットを行う前に区切り文字を指定する必要はありません。

サンプルコード

function formatDate(date) {
  const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'};
  return date.toLocaleString('ja-JP', options);
}

const now = new Date();
const formattedDateTime = formatDate(now);
console.log(formattedDateTime); 

結果

出力結果です。

実行時点が”2023/05/02 23:39:21″なのでその結果が返ります。

YYYY/MM/DD hh:mm:ss.iii（ミリ秒追加）形式で出力する

YYYY/MM/DD hh:mm:ss.iiiのミリ秒追加形式で日付を出力するには、toLocaleString()メソッドに引数として’ja-JP’と{ year: ‘numeric’, month: ‘2-digit’, day: ‘2-digit’, hour: ‘2-digit’, minute: ‘2-digit’, second: ‘2-digit’, fractionalSecondDigits: 3 }を渡します。

これは、日本語のロケールを使用し、年は数値、月と日は2桁の数値、時分秒は2桁の数値、小数点以下3桁の秒で表示するためのオプションオブジェクトになります。

サンプルコード

function formatDate(date) {
 const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', fractionalSecondDigits: 3 };
  return date.toLocaleString('ja-JP', options);
}

const now = new Date();
const formattedDateTime = formatDate(now);
console.log(formattedDateTime); 

結果

出力結果です。

実行時点が”2023/05/02 23:39:21.188″なのでその結果が返ります。

YYYY年MM月DD日形式で出力する

YYYY年MM月DD日のフォーマット形式で日付を出力してみましょう。

formatDate()関数で引数に日付を受け取り、toLocaleDateString()メソッドを使用して、引数で指定されたoptionsオブジェクトを使用して日付をフォーマットします。

ここでは、日本語のフォーマットに合わせて、年、月、日を含むフォーマットを指定しています。

サンプルコード

function formatDate(date) {
  const options = { year: 'numeric', month: 'long', day: 'numeric' };
  return date.toLocaleDateString('ja-JP', options);
}

const today = new Date();
const formattedDate = formatDate(today);
console.log(formattedDate);

結果

出力結果です。

本日の日付が返ります。

タカヒロ

month: ‘long’をlong型以外の型に変えるとYYYY/MM/DD形式に変換されますのでご注意ください。

さいごに

いかがでしょうか。

今回は、

についてまとめました。

また、他にも役に立つ情報がありますので、よろしければご参照頂ければと思います。