[Moment.js] JavaScriptで日付を表示する

JavaScriptで日付表示を行うことができるライブラリを紹介します。

Moment.js
https://momentjs.com/

Moment Timezone
https://momentjs.com/timezone/

今回使用したJavaScriptライブラリのバージョンは下記の通りです。

JavaScriptライブラリ

Bootstrap: 3.3.7
jQuery: 3.3.1
moment: 2.24.0
moment-timezone: 0.5.25-2019a

Moment.js とは

JavaScript で文字列からオブジェクトに変換したり、オブジェクトから指定したフォーマット文字列に変換したりできます。また、月末日時や加算減算が簡単に取得することができます。

ライブラリの読み込み

moment.min.jsを参照します。

<script type="text/javascript" src="../lib/moment/moment.min.js"></script>

デモはこちら
ソースファイルはこちら

基本的な使い方

入力

現在時刻を入力する

moment(); // 2019-05-15T15:15:50.900Z

JSON型文字列で入力する

moment('2018-12-25T01:30:00.123Z'); // 2018-12-25T01:30:00.123Z

指定したフォーマットで入力する

moment('2018-12-25', 'YYYY-MM-DD'); // 2018-12-24T15:00:00.000Z

入力した文字列が正しいことを判定する

moment('2018-12-25', 'YYYY-MM-DD').isValid(); // => true
moment('xxx', 'YYYY-MM-DD').isValid(); // => false

特定の値を指定して入力する

moment({year:2018,month:11,day:25,hour:1,minute:30,second:0,millsecond:123}); // 2018-12-24T16:30:00.000Z
moment('2018-12-25', 'YYYY-MM-DD').set('year', 2015); // 2015-12-24T15:00:00.000Z
moment('2018-12-25', 'YYYY-MM-DD').set('month', 0); // 2018-01-24T15:00:00.000Z (0から始まる)
moment('2018-12-25', 'YYYY-MM-DD').set('date', 1); // 2018-11-30T15:00:00.000Z
moment('2018-12-25', 'YYYY-MM-DD').set('day', 1); // 2018-12-23T15:00:00.000Z (曜日)
moment('2018-12-25', 'YYYY-MM-DD').set('hour', 1); // 2018-12-24T16:00:00.000Z
moment('2018-12-25', 'YYYY-MM-DD').set('minute', 1); // 2018-12-24T15:01:00.000Z
moment('2018-12-25', 'YYYY-MM-DD').set('second', 1); // 2018-12-24T15:00:01.000Z
moment('2018-12-25', 'YYYY-MM-DD').set('millisecond', 1); // 2018-12-24T15:00:00.001Z

月初め、月末を入力する

moment('2018-12-25', 'YYYY-MM-DD').startOf('month'); // 2018-11-30T15:00:00.000Z
moment('2018-12-25', 'YYYY-MM-DD').endOf('month'); // 2018-12-31T14:59:59.999Z

出力

Date型オブジェクトで出力する

moment().toDate(); // => Wed May 15 2019 13:03:18 GMT+0900 (日本標準時)

JSON型文字列で出力する

moment().toJSON(); // => 2019-05-15T04:03:18.900Z

指定したフォーマットで出力する

moment().format('YYYY-MM-DD'); // => 2019-05-15
moment().format(); // => 2019-05-15T13:03:18+09:00 (ISO8601)

特定の値を出力する

moment().get('year'); // => 2019
moment().get('month'); // => 4 (0から始まる)
moment().get('date'); // => 15
moment().get('day'); // => 3 (曜日)
moment().get('hour'); // => 23
moment().get('minute'); // => 48
moment().get('second'); // => 8
moment().get('millisecond'); // => 514

計算

加算する

moment('2018-12-25', 'YYYY-MM-DD').add(1, 'months'); // 2019-01-24T15:00:00.000Z

減算する

moment('2018-12-25', 'YYYY-MM-DD').subtract(1, 'months'); // 2018-11-24T15:00:00.000Z

2つの日付の差分を取得する

moment('2018-12-25', 'YYYY-MM-DD').diff(moment('2017-12-25', 'YYYY-MM-DD'), 'year'); // => 1
moment('2018-12-25', 'YYYY-MM-DD').diff(moment('2017-12-25', 'YYYY-MM-DD'), 'month'); // => 12
moment('2018-12-25', 'YYYY-MM-DD').diff(moment('2017-12-25', 'YYYY-MM-DD'), 'days'); // => 365

比較

2つの日付が等しいことを判定する

moment('2018-12-25', 'YYYY-MM-DD').isSame(moment('2018-12-25', 'YYYY-MM-DD'), 'month'); // => true

より小さいことを判定する

moment('2018-12-25', 'YYYY-MM-DD').isBefore(moment('2019-01-25', 'YYYY-MM-DD'), 'month'); // => true

より大きいことを判定する

moment('2018-12-25', 'YYYY-MM-DD').isAfter(moment('2018-11-25', 'YYYY-MM-DD'), 'month'); // => true

以下であることを判定する

moment('2018-12-25', 'YYYY-MM-DD').isSameOrBefore(moment('2018-12-25', 'YYYY-MM-DD'), 'month'); // => true

以上であることを判定する

moment('2018-12-25', 'YYYY-MM-DD').isSameOrAfter(moment('2018-12-25', 'YYYY-MM-DD'), 'month'); // => true

多言語化

多言語化対応している出力については、別途ライブラリファイルを読み込む必要があります。

ライブラリの読み込み

moment-with-locales.min.jsを参照します。

index.html

<script type="text/javascript" src="../lib/moment/moment.min.js"></script>
<script type="text/javascript" src="../lib/moment/moment-with-locales.min.js"></script>

デモはこちら
ソースファイルはこちら

ロケールを変更する

moment.locale(lang);

曜日を出力する

moment().format('YYYY-MM-DD(dddd)'); // => 2019-05-15(Wednesday)

午前/午後を出力する

moment().format('YYYY-MM-DD a'); // => 2019-05-15 pm

～前を出力する

moment('2018-12-25', 'YYYY-MM-DD').fromNow(); // => 5 months ago

カレンダー形式で出力する

moment('2018-12-25', 'YYYY-MM-DD').calendar(); // => 12/25/2018

タイムゾーン

タイムゾーンに対応する場合は、別途ライブラリファイルを読み込む必要があります。

ライブラリの読み込み

下記のファイルを参照します。
moment-timezone.min.js
moment-timezone-with-data.min.js
moment-timezone-with-data-2012-2022.min.js

index.html

<script type="text/javascript" src="../lib/moment/moment.min.js"></script>
<script type="text/javascript" src="../lib/moment/moment-with-locales.min.js"></script>
<script type="text/javascript" src="../lib/moment-timezone/moment-timezone.min.js"></script>
<script type="text/javascript" src="../lib/moment-timezone/moment-timezone-with-data.min.js"></script>
<script type="text/javascript" src="../lib/moment-timezone/moment-timezone-with-data-2012-2022.min.js"></script>

デモはこちら
ソースファイルはこちら

UTCに変換する

moment().utc(); // Wed May 15 2019 15:36:59 GMT+0000

指定したタイムゾーンに変換する

moment().tz('Asia/Tokyo'); // Thu May 16 2019 00:36:41 GMT+0900

以上です。