Ribbit works
記事のトップ画像

Dateオブジェクトを任意の文字列でフォーマットする(yyyy-MM-ddなど)【コピペで使えるJavaScriptコード】

TypeScriptJavaScript

last modified date2021-12-8

publish date2021-12-7

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

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)]).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桁未満の場合は、先頭から桁を削っていきます。