Edited at

[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

以上です。