JavaScript で日付のフォーマットを整形する
Movable Type で日付のフォーマットをいじりたいときには、%
を使って簡単に設定できます。
例えば、「2013年03月14日 (月)」と表示したいときは、次のように指定します。
<$MTDate format="%Y年%m月%d日 (%a)"$>
詳しくは、日付に関するテンプレートタグのモディファイアリファレンス を参照。
その感覚で、JavaScript でも同じようなことできると思っていたら、そういうものは無いらしい。 なので、自分でフォーマットを整形したいときは、次のように指定します。
// 今日の日付で Date オブジェクトを作成 var now = new Date(); // 「年」「月」「日」「曜日」を Date オブジェクトから取り出してそれぞれに代入 var y = now.getFullYear(); var m = now.getMonth() + 1; var d = now.getDate(); var w = now.getDay(); // 曜日の表記を文字列の配列で指定 var wNames = ['日', '月', '火', '水', '木', '金', '土']; // 「月」と「日」で1桁だったときに頭に 0 をつける if (m < 10) { m = '0' + m; } if (d < 10) { d = '0' + d; } // フォーマットを整形してコンソールに出力 console.log(y + '年' + m + '月' + d + '日 (' + wNames[w] + ')');
コードの解説
「年」「月」「日」「曜日」を Date オブジェクトから取り出してそれぞれに代入
var y = now.getFullYear(); var m = now.getMonth() + 1; var d = now.getDate(); var w = now.getDay();
date オブジェクトには、getFullYear()
getMonth()
getDate()
getDay()
というメソッドが用意されているので、取り出したらそれぞれ別の変数に格納しています。
なぜか getMonth()
だけは、実際の月から -1 された数字が入るので、 +1 しています。
date オブジェクトのメソッドの詳細は Dateオブジェクト / JavaScriptリファレンス を参照しました。
曜日の表記を文字列の配列で指定
var wNames = ['日', '月', '火', '水', '木', '金', '土'];
曜日を取り出す getDay()
では、0 から 6 の数字が取得できます。
0 が日曜日、1 が月曜・・・6 が土曜日という対応になっているので、曜日をどのように表記するかかを文字列の配列で持っておきます。
「月」と「日」で1桁だったときに頭に 0 をつける
if (m < 10) { m = '0' + m; } if (d < 10) { d = '0' + d; }
「3月」を「03月」と 0 詰めして表記したい場合は、自分で処理しなければなりません。 入っている値が 1 〜 9 の場合は、頭に '0' という文字を追加することで、自動的に型変換されて 3 という数値が '03' という文字列になります。
フォーマットを整形してコンソールに出力
console.log(y + '年' + m + '月' + d + '日 (' + wNames[w] + ')');
あとは、それぞれ処理済みの変数を、好きなように整形して表示させるだけです。
関数化する
同じサイトの中では、日付の表記は普通は統一させると思います。でも、日付を扱う場所で都度上記の処理を行うのは面倒なので、フォーマットを整形する部分を関数化して、どこからでも呼び出せるようにしておくと便利です。
// Date オブジェクトを作成 var now = new Date(); // dateFormat 関数の実行 console.log(dateFormat(now)); // dateFormat 関数の定義 function dateFormat(date) { var y = date.getFullYear(); var m = date.getMonth() + 1; var d = date.getDate(); var w = date.getDay(); var wNames = ['日', '月', '火', '水', '木', '金', '土']; if (m < 10) { m = '0' + m; } if (d < 10) { d = '0' + d; } // フォーマット整形済みの文字列を戻り値にする return y + '年' + m + '月' + d + '日 (' + wNames[w] + ')'; }
date オブジェクトを引数で渡して、整形済みの文字列を戻り値で受け取る関数にしてみました。
ゼロ埋めの方法を改善(2013-03-21 追記)
コメント欄で、ゼロパディング(ゼロ埋め)は .slice() メソッドを使えばできると教えてもらったので、dateFormat 関数を修正してみました。
// Date オブジェクトを作成 var now = new Date(); // dateFormat 関数の実行 console.log(dateFormat(now)); // dateFormat 関数の定義 function dateFormat(date) { var y = date.getFullYear(); var m = date.getMonth() + 1; var d = date.getDate(); var w = date.getDay(); var wNames = ['日', '月', '火', '水', '木', '金', '土']; m = ('0' + m).slice(-2); d = ('0' + d).slice(-2); // フォーマット整形済みの文字列を戻り値にする return y + '年' + m + '月' + d + '日 (' + wNames[w] + ')'; }
if が取れてスッキリしました。うれしい。GAVAScript さん、吉田さん、どうもありがとうございます。
ライブラリを使う(2013-03-21 追記)
自分で書かずにライブラリを使うのが便利らしいです。教えてくれてあざます!
- おすすめライブラリつまみ食い - Moment.js | CodeGrid @hokaccha thx
- tokuhirom/strftime-js · GitHub @songmu thx