zukucode
主にWEB関連の情報を技術メモとして発信しています。

JavaScript 日付を指定した書式の文字列にフォーマットする

JavaScriptの日付オブジェクトを指定した書式でフォーマットする汎用ファンクションを作成します。

日付オブジェクトを文字列に変換していくのではなく、指定したフォーマットの文字列に日付オブジェクトの対象の値を置換していくイメージです。

このやり方なら例えば曜日が必要な場合でも簡単に拡張できます。

// date: 日付オブジェクト
// format: 書式フォーマット
function formatDate (date, format) {
  format = format.replace(/yyyy/g, date.getFullYear());
  format = format.replace(/MM/g, ('0' + (date.getMonth() + 1)).slice(-2));
  format = format.replace(/dd/g, ('0' + date.getDate()).slice(-2));
  format = format.replace(/HH/g, ('0' + date.getHours()).slice(-2));
  format = format.replace(/mm/g, ('0' + date.getMinutes()).slice(-2));
  format = format.replace(/ss/g, ('0' + date.getSeconds()).slice(-2));
  format = format.replace(/SSS/g, ('00' + date.getMilliseconds()).slice(-3));
  return format;
};

// 2017年1月2日3時4分5秒6ミリ秒
var date = new Date(2017, 0, 2, 3, 4, 5, 6);

console.log(formatDate(date, 'yyyyMMdd')); // "20170102"
console.log(formatDate(date, 'yyyyMMddHHmmssSSS')); // "20170102030405006"
console.log(formatDate(date, 'yyyy/MM/dd')); // "2017/01/02"
console.log(formatDate(date, 'yyyy-MM-dd')); // "2017-01-02"
console.log(formatDate(date, 'HH:mm')); // "03:04"
console.log(formatDate(date, 'HH:mm:ss:SSS')); // "03:04:05:006"

2017/1/2などのように、0埋めが不要な場合は以下ようにします。

function formatDate (date, format) {
  format = format.replace(/yyyy/g, date.getFullYear());
  format = format.replace(/M/g, (date.getMonth() + 1));
  format = format.replace(/d/g, (date.getDate()));
  format = format.replace(/H/g, (date.getHours()));
  format = format.replace(/m/g, (date.getMinutes()));
  format = format.replace(/s/g, (date.getSeconds()));
  format = format.replace(/S/g, (date.getMilliseconds()));
  return format;
};
// 2017年1月2日3時4分5秒6ミリ秒
var date = new Date(2017, 0, 2, 3, 4, 5, 6);

console.log(formatDate(date, 'yyyy/M/d')); // "2017/1/2"
console.log(formatDate(date, 'yyyy-M-d')); // "2017-1-2"
console.log(formatDate(date, 'H:m')); // "3:4"
console.log(formatDate(date, 'H:m:s:S')); // "3:4:5:6"

関連記事

  • webpack-dev-serverでhttpsでのアクセスを可能にする方法

    webpack-dev-serverでhttpsでのアクセスを可能にする方法を紹介します。外部APIのテストや、メディアデバイスのテストなどで、開発中のlocalhostをhttpsにする必要があると...


  • ASP.NET UpdatePanelでPostBack時にフォーカス状態を保持する

    ASP.NETのUpdatePanelでPostBack時にコントロールのフォーカス状態を保持する方法を紹介します。UpdatePanelのポストバックの開始と終了のイベントを設定するで紹介した方法で...


  • stylelintで例外(無視)するタグを指定する

    cssで構文チェックを行うstylelintで任意のタグを無視してエラーとしない方法を紹介します。以下のようにruleのignoreTypesで無視するタグを指定します。以下の例ではamp htmlの...


  • JavaScript localStorageの基本的な使い方まとめ

    JavaScriptでデータをブラウザに簡単に保存する仕組みのlocalStorageの基本的な使い方を紹介します。keyは保存するときにキーとなる値です。取り出すときにこのキーを指定して取得します。...


  • JavaScript 文字列を連結する

    JavaScriptで文字列を連結します。JavaScriptでは文字列の連結は文字列同士を+で結合できます。例えば以下のように、数値同士を+演算子で計算すると足し算が行われてしまうので注意します。上...


  • JavaScript 0埋めをするテキストボックスを作成する

    テキストボックスで値を入力後、指定した文字数に0埋めする処理を実装します。以下のURLで紹介した処理を組み合わせれば簡単に実装できます。JavaScriptで指定した文字数に0埋めをするとJavaSc...


  • JavaScript ¥(円マーク)を文字列で扱う

    JavaScriptの¥(円マーク)は、正しく設定していないと利用者のPCのOSなどの環境によっては\(バックスラッシュ)で表示されてしまう可能性があるので、扱いには注意が必要です。JavaS...


  • JavaScript trimで前後の空白(スペース)を削除する

    JavaScriptで文字列の前後の空白(スペース)を削除します。trim関数を使えば先頭と末尾の半角スペース、全角スペースの両方が削除されます。IE8以下の場合はtrim関数が使えないので自作する必...


  • JavaScript 時刻の妥当性チェックをする

    時刻の妥当性チェックを行います。HH:mm書式で00:00〜23:59までの範囲が有効になるように正規表現でチェックをしています。


  • JavaScript システム日付を取得する

    JavaScriptでシステム日付を取得するには以下のように、Dateオブジェクトを宣言します。取得したDateオブジェクトから年〜ミリ秒までをそれぞれ取得できます。月だけは0から始まるので+1をする...