LoginSignup
25

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-05-15

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

以上です。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
25