日時設定が簡単になる！「Moment.js」

2017年7月22日2017年10月12日

普段私はPHPを主に使っているのですが、PHPと比べるとjavascriptって日時関連のスクリプトを組むのがとってもめんどくさい。
そんなめんどくさいを解決してくれるjavascriptライブラリの「Moment.js」を紹介します。

導入方法

ダウンロード

公式サイトからmoment.min.jsをダウンロードしてください。

コード

現在の日時を表示するコードを紹介します。

まずライブラリを読み込みます。

<!-- momentの本体-->
<script src="moment.min.js"></script>

現在の日時を表示する場所と、表示するためのボタンのHTMLを記述します。
ボタンをクリックしたら、view_now()が実行されます。

<!-- 現在の日時を表示する場所-->
<div id="time"></div>

<!-- 現在の日時を表示するためのボタン-->
<input type="button" onclick="view_now()" value="現在の日時を表示">

moment.format(‘フォーマット’)で現在の日時を表示することができます。

function view_now() {
    var date_str = moment().format('YYYY年MM月DD日 HH時mm分ss秒 ');
    document.getElementById("time").innerHTML = date_str;
}

[btn class=”rich_pink”]デモ確認[/btn]

個人的によく使うフォーマット

個人的によく使うフォーマットを紹介します。
ほかにも知りたい方は公式サイトのドキュメントを確認してください。

フォーマット	説明
YYYY	年。4桁の数字
YY	年。2桁の数字
MM	月。2桁の数字（01..12)
M	月。1..12
DD	日。2桁の数字（01..31)
D	日。1..31
ddd	曜日。英語表記の頭文字3文字
dddd	曜日。英語表記(Sunday)
e	曜日。0～6の数字。0が日曜日で6が土曜日
HH	時。2桁の数字（00..23)
H	時。0..23
mm	分。2桁の数字（00..59)
m	分。0..59
ss	秒。2桁の数字（00..59)
s	秒。0..59

日本語対応させる場合

Moment.jsの素晴らしいところは日本語での出力も対応している点です。
公式サイトからmoment-with-locales.min.jsをダウンロードしてください。

moment-with-locales.min.jsを読み込ませます。
このときmoment.min.jsは必要ありません。

<!-- momentの本体-->
<script src="moment-with-locales.min.js"></script>

HTMLコードは最初に紹介したコードと同じです。

moment.locale(‘ja’);の記述を追加。
さらに、個人的によく使うフォーマットを参考にして、曜日に関するフォーマットを追加します。

function view_now() {
    // 日本語を指定
    moment.locale('ja');
    // 曜日に関するフォーマットddd追加
    var date_str = moment().format('YYYY年MM月DD日 HH時mm分ss秒 ddd');
    document.getElementById("time").innerHTML = date_str;
}

[btn class=”rich_pink”]デモ確認[/btn]

日本語で曜日が表示されたはずです。

さらに指定日の曜日を表示させる場合は以下のように修正してください。

function view_now() {
    // 日本語を指定
    moment.locale('ja');
    // 日付を指定
    var momentObj = moment('2017-06-27');
    var date_str = momentObj.format('YYYY年MM月DD日 HH時mm分ss秒 ddd');
    document.getElementById("time").innerHTML = date_str;
}

[kanren postid=”135″]