Dateオブジェクトを任意の文字列でフォーマットする(yyyy-MM-ddなど)【JavaScript, TypeScript両対応】

まず結論を載せておきます。

const getFormattedDate = (date, format) => {
  const symbol = {
    M: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    m: date.getMinutes(),
    s: date.getSeconds(),
  };

  const formatted = format.replace(/(M+|d+|h+|m+|s+)/g, (v) =>
    ((v.length > 1 ? '0' : '') + symbol[v.slice(-1)]).slice(-2)
  );

  return formatted.replace(/(y+)/g, (v) => date.getFullYear().toString().slice(-v.length));
};

今回は JavaScript の Date オブジェクトを、指定した文字列(yyyy-MM-dd など)でフォーマットする方法を紹介します。

標準機能で解決するかも

Date オブジェクトには様々なフォーマット関数が用意されています。

任意の文字列で変換せずとも解決する可能性がありますので、要件に合うものがないか確認してみてください。

JavaScript

const getFormattedDate = (date) => date.toLocaleDateString(); // → 2021/12/8
const getFormattedDate = (date) => date.toISOString().split('T')[0]; // → 2021-12-08
const getFormattedDate = (date) => date.toLocaleString(); // → 2021/12/8 10:29:30
const getFormattedDate = (date) => date.toLocaleTimeString(); // → 6:00:00
const getFormattedDate = (date) => date.toJSON(); // → 2021-12-08T01:29:30.811Z
const getFormattedDate = (date) => date.toString(); // → Wed Dec 08 2021 10:29:30 GMT+0900 (日本標準時)
const getFormattedDate = (date) => date.toISOString(); // → 2021-12-08T01:29:30.811Z
const getFormattedDate = (date) => date.toDateString(); // → Wed Dec 08 2021

TypeScript

const getFormattedDate = (date: Date): string => date.toLocaleDateString(); // → 2021/12/8
const getFormattedDate = (date: Date): string => date.toISOString().split('T')[0]; // → 2021-12-08
const getFormattedDate = (date: Date): string => date.toLocaleString(); // → 2021/12/8 10:29:30
const getFormattedDate = (date: Date): string => date.toLocaleTimeString(); // → 6:00:00
const getFormattedDate = (date: Date): string => date.toJSON(); // → 2021-12-08T01:29:30.811Z
const getFormattedDate = (date: Date): string => date.toString(); // → Wed Dec 08 2021 10:29:30 GMT+0900 (日本標準時)
const getFormattedDate = (date: Date): string => date.toISOString(); // → 2021-12-08T01:29:30.811Z
const getFormattedDate = (date: Date): string => date.toDateString(); // → Wed Dec 08 2021

任意の文字列でフォーマットするコード

任意の日付と時間に対応しています。

JavaScript

const getFormattedDate = (date, format) => {
  const symbol = {
    M: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    m: date.getMinutes(),
    s: date.getSeconds(),
  };

  const formatted = format.replace(/(M+|d+|h+|m+|s+)/g, (v) =>
    ((v.length > 1 ? '0' : '') + symbol[v.slice(-1)]).slice(-2)
  );

  return formatted.replace(/(y+)/g, (v) => date.getFullYear().toString().slice(-v.length));
};

TypeScript

const getFormattedDate = (date: Date, format: string) => {
  const symbol = {
    M: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    m: date.getMinutes(),
    s: date.getSeconds(),
  };

  const formatted = format.replace(/(M+|d+|h+|m+|s+)/g, (v) =>
    ((v.length > 1 ? "0" : "") + symbol[v.slice(-1) as keyof typeof symbol]).slice(-2)
  );

  return formatted.replace(/(y+)/g, (v) =>
    date.getFullYear().toString().slice(-v.length)
  );
};

デモ

今回紹介したプログラムをお試しいただけます。

解説

まず最初の replace 関数で、年を除くすべての文字を対応する時刻に変換しています。

const formatted = format.replace(/(M+|d+|h+|m+|s+)/g, (v) =>
  ((v.length > 1 ? '0' : '') + symbol[v.slice(-1)]).slice(-2)
);

それぞれについて、文字数が 2 つ(月であれば MM)指定されていた場合は、先頭を 0 で埋めた値が返却されます。

return formatted.replace(/(y+)/g, (v) => date.getFullYear().toString().slice(-v.length));

年については最大 4 桁になる可能性があるため、処理を分けています。 4 桁未満の場合は、先頭から桁を削っていきます。