Reactで時間を表示。momentで日付操作

JavaScriptの日付操作用ライブラリmomentの利用方法です。
Reactでの時間表示にも使用できます。

1. install
2. 基本的な使い方
3. 加算(足し算)
4. 減算(引き算)
5. コピー
6. 比較
7. format指定
8. 日本語設定
9. moment-docs-URL

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(日曜日)