JavaScriptの日付操作用ライブラリmomentの利用方法です。
Reactでの時間表示にも使用できます。
目次
install
npmでのインストール方法
npm install moment --save
yarnでのインストール方法
yarn add moment
基本的な使い方
- 日付の生成
- フォーマットを使ってみる
- 文字列を日付に変更
- Dateを日付に変更
import moment from 'moment';
const now = moment(); // Fri Jan 01 2021 05:59:01 GMT+0900
const nowFormat = now.format(); // 2021-01-01T05:59:01+09:00
const day = moment('2020-01-02'); // Thu Jan 02 2020 00:00:00 GMT+0900
const dayFormat = day.format(); // 2020-01-02T00:00:00+09:00
const date = moment(new Date()); // Fri Jan 01 2021 05:59:01 GMT+0900
const dateFormat = date.format(); // 2021-01-01T05:59:01+09:00
加算(足し算)
日付の足し算です。‘years’ の部分は省略も可能です。減算のところは省略系verです。
const years = moment('2020-01-01').add(1, 'years').format(); // 2021-01-01T00:00:00+09:00
const months = moment('2020-01-01').add(2, 'months').format(); // 2020-03-01T00:00:00+09:00
const weeks = moment('2020-01-01').add(1, 'weeks').format(); // 2020-01-08T00:00:00+09:00
const days = moment('2020-01-01').add(3, 'days').format(); // 2020-01-04T00:00:00+09:00
const hours = moment('2020-01-01').add(4, 'hours').format(); // 2020-01-01T04:00:00+09:00
const minutes = moment('2020-01-01').add(5, 'minutes').format(); // 2020-01-01T00:05:00+09:00
const seconds = moment('2020-01-01').add(6, 'seconds').format(); // 2020-01-01T00:00:06+09:00
減算(引き算)
日付の引き算です。‘y’ の部分は省略系です。加算のところではしっかり書いているverです。
const years = moment('2020-01-01').subtract(1, 'y').format(); // 2019-01-01T00:00:00+09:00
const months = moment('2020-01-01').subtract(2, 'M').format(); // 2019-11-01T00:00:00+09:00
const weeks = moment('2020-01-01').subtract(1, 'w').format(); // 2019-12-25T00:00:00+09:00
const days = moment('2020-01-01').subtract(3, 'd').format(); // 2019-12-29T00:00:00+09:00
const hours = moment('2020-01-01').subtract(4, 'h').format(); // 2019-12-31T20:00:00+09:00
const minutes = moment('2020-01-01').subtract(5, 'm').format(); // 2019-12-31T23:55:00+09:00
const seconds = moment('2020-01-01').subtract(6, 's').format(); // 2019-12-31T23:59:54+09:00
コピー
元の日付を置いておきたい時には、日付をコピーして使いましょう。
const day = moment('2020-01-01'); // Wed Jan 01 2020 00:00:00 GMT+0900
const clone = day.clone(); // Wed Jan 01 2020 00:00:00 GMT+0900
const cloneFormat = clone.add(1, 'months').add(2, 'days').format(); // 2020-02-03T00:00:00+09:00
const dayFormat = day.format(); // 2020-01-01T00:00:00+09:00
比較
日付の比較です。日付より前の日なのか後の日なのかや範囲の比較もできます。戻り値はbooleanです。
const target = moment('2020-02-02');
const one = moment('2020-01-01');
const two = moment('2020-02-02');
const three = moment('2020-03-03');
target.isAfter(one)} // true
target.isAfter(two)} // false
target.isAfter(three)} // false
target.isBefore(one)} // false
target.isBefore(two)} // false
target.isBefore(three)} // true
target.isSame(one)} // false
target.isSame(two)} // true
target.isSame(three)} // false
target.isSameOrAfter(one)} // true
target.isSameOrAfter(two)} // true
target.isSameOrAfter(three)} // false
target.isSameOrBefore(one)} // false
target.isSameOrBefore(two)} // true
target.isSameOrBefore(three)} // true
target.isBetween(one, two)} // false
target.isBetween(one, three)} // true
target.isBetween(two, three)} // false
format指定
月までの表示や秒まで表示したい時などはformatを使って指定しましょう。
moment().format('YYYY-MM-DD HH:mm:ss.SSS')} // 2021-01-01 06:08:29.820
const target = moment('2020-02-02');
target.format('M-DD')} // 2-02
target.format('MM-DD')} // 02-02
target.format('MMM-DD')} // Feb-02
target.format('MMMM-DD')} // February-02
target.format('M-D')} // 2-2
target.format('MM-DD(d)')} // 02-02(0)
target.format('MM-DD(dd)')} // 02-02(Su)
target.format('MM-DD(ddd)')} // 02-02(Sun)
target.format('MM-DD(dddd)')} // 02-02(Sunday)
日本語設定
momentで月や曜日を日本語表示したい場合には、日本語用の import をする必要があります。
import moment from 'moment';
import 'moment/locale/ja';
const target = moment('2020-02-02');
target.format('MMM-DD')} // 2月-02
target.format('MMMM-DD')} // 2月-02
target.format('MM-DD(d)')} // 02-02(0)
target.format('MM-DD(dd)')} // 02-02(日)
target.format('MM-DD(ddd)')} // 02-02(日)
target.format('MM-DD(dddd)')} // 02-02(日曜日)
moment-docs-URL
Moment Docです。詳しく知りたい方はこちらへどうぞ。https://momentjs.com/docs/
以上、momentでの日付操作でした。
コメント