Day.jsで日付操作(比較, 差分, フォーマット)

2022/11/26

JavaScriptの日付操作用ライブラリである「Day.js」の利用方法を確認します。「Day.js」は「Moment.js」とほぼ互換性のあるAPIを提供しており、Moment.jsの代わりとして推奨されているライブラリの1つです。豊富な機能が提供されていますが、利用頻度の高い機能について取り上げます。(動作検証はTypescriptで行っています。)

インストール

Day.jsをインストールします。

// npmの場合
npm install dayjs --save

// yarnの場合
yarn add dayjs

インストールできました。

$ yarn list --depth=0 | grep dayjs
└─ dayjs@1.9.3

オブジェクト生成

「コンストラクタ引数を指定しないケース」「日時を表す文字列を指定するケース」「Dateオブジェクトを指定するケース」で確認します。

import dayjs from 'dayjs';

const now = dayjs(); // 現在の日付情報を取得
console.log(now.format()); // 2020-10-24T09:48:19+09:00

const day1 = dayjs('2020-11-01');
console.log(day1.format()); // 2020-11-01T00:00:00+09:00

const day2 = dayjs(new Date());
console.log(day2.format()); // 2020-10-24T09:48:19+09:00

日時の加算減算
( add subtract )

日時の加算には addメソッド を利用します。日時の減算には subtractメソッド を利用します。

import dayjs from 'dayjs';

// 年 → 「year or y」
console.log(dayjs('2019-01-10 07:30:20').add(2, 'y').format()); // '2021-01-10T07:30:20+09:00'

// 月 → 「month or M」
console.log(dayjs('2019-01-10 07:30:20').add(3, 'M').format()); // '2019-04-10T07:30:20+09:00'

// 週 → 「week or w」
console.log(dayjs('2019-01-10 07:30:20').add(4, 'w').format()); // '2019-02-07T07:30:20+09:00'

// 日 → 「day or d」
console.log(dayjs('2019-01-10 07:30:20').add(4, 'd').format()); // '2019-01-14T07:30:20+09:00'

// 時間 → 「hour or h」
console.log(dayjs('2019-01-10 07:30:20').add(4, 'h').format()); // '2019-01-10T11:30:20+09:00'

// 分 → 「minute or m」
console.log(dayjs('2019-01-10 07:30:20').add(4, 'm').format()); // '2019-01-10T07:34:20+09:00'

// 秒 → 「second or s」
console.log(dayjs('2019-01-10 07:30:20').add(4, 's').format()); // '2019-01-10T07:30:24+09:00'

// subtract
console.log(dayjs('2019-01-10 07:30:20').subtract(4, 'year').format()); // '2015-01-10T07:30:20+09:00'

始まり、終わり
( startOf endOf )

startOfメソッド endOfメソッド を利用すると、時間単位ごとの 始まり と 終わり を取得できます。

import dayjs from 'dayjs';

console.log(dayjs('2019-01-10 07:30:20').startOf('year').format()); // '2019-01-01T00:00:00+09:00'
console.log(dayjs('2019-01-10 07:30:20').endOf('year').format()); // '2019-12-31T23:59:59+09:00'

console.log(dayjs('2019-01-10 07:30:20').startOf('month').format()); // '2019-01-01T00:00:00+09:00'
console.log(dayjs('2019-01-10 07:30:20').endOf('month').format()); // '2019-01-31T23:59:59+09:00'

console.log(dayjs('2019-01-10 07:30:20').startOf('week').format()); // '2019-01-06T00:00:00+09:00'
console.log(dayjs('2019-01-10 07:30:20').endOf('week').format()); // '2019-01-12T23:59:59+09:00'

console.log(dayjs('2019-01-10 07:30:20').startOf('day').format()); // '2019-01-10T00:00:00+09:00'
console.log(dayjs('2019-01-10 07:30:20').endOf('day').format()); // '2019-01-10T23:59:59+09:00'

console.log(dayjs('2019-01-10 07:30:20').startOf('hour').format()); // '2019-01-10T07:00:00+09:00'
console.log(dayjs('2019-01-10 07:30:20').endOf('hour').format()); // '2019-01-10T07:59:59+09:00'

毎回新しいインスタンスが生成される

moment.jsと違い、毎回新しいインスタンスが生成されます。

import dayjs from 'dayjs';

const a = dayjs('2019-01-10 07:30:20');
console.log(a.format()); // '2019-01-10T07:30:20+09:00'

const newA = a.add(3, 'day');
console.log(a.format()); // '2019-01-13T07:30:20+09:00'
console.log(newA.format()); // '2019-01-13T07:30:20+09:00'

他の日時との差分
( diff )

import dayjs from 'dayjs';

const dateTo = dayjs('2018-09-01 06:00:00');
const dateFrom = dayjs('2018-12-01 12:00:00');

// ミリ秒を返します
dateFrom.diff(dateTo);
console.log(dateFrom.diff(dateTo)); // 7884000000
console.log(dateFrom.diff(dateTo) / (24 * 60 * 60 * 1000)); // 91.25

// 第2引数で単位を指定できます。
console.log(dateFrom.diff(dateTo, 'month')); // 3
console.log(dateFrom.diff(dateTo, 'day')); // 91
console.log(dateFrom.diff(dateTo, 'hour')); // 2190

// 第3引数で小数の調整ができます。
console.log(dateFrom.diff(dateTo, 'day', true)); // 91.25
console.log(dateFrom.diff(dateTo, 'day', false)); // 91

他の日時との比較
( isAfter isBefore isBetween )

import dayjs from 'dayjs';

// プラグインが必要
import isBetween from 'dayjs/plugin/isBetween';
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';

dayjs.extend(isSameOrAfter);
dayjs.extend(isSameOrBefore);
dayjs.extend(isBetween);

const a = dayjs('2018-09-01 06:00:00');
const b = dayjs('2018-10-01 06:00:00');
const c = dayjs('2018-11-01 06:00:00');

console.log(b.isAfter(a)); // true
console.log(b.isAfter(b)); // false
console.log(b.isAfter(c)); // false

console.log(b.isSame(a)); // false
console.log(b.isSame(b)); // true
console.log(b.isSame(c)); // false

console.log(b.isBefore(a)); // false
console.log(b.isBefore(b)); // false
console.log(b.isBefore(c)); // true

console.log(b.isSameOrAfter(a)); // true
console.log(b.isSameOrAfter(b)); // true
console.log(b.isSameOrAfter(c)); // false

console.log(b.isSameOrBefore(a)); // false
console.log(b.isSameOrBefore(b)); // true
console.log(b.isSameOrBefore(c)); // true

console.log(b.isBetween(a, c)); // true
console.log(c.isBetween(a, b)); // false

フォーマット
( format )

import dayjs from 'dayjs';

const a = dayjs('2019-01-10 17:30:20');

console.log(a.format('YYYY-MM-DD HH:mm:ss')); // '2019-01-10 17:30:20'

// Unixタイムスタンプ
console.log(a.valueOf()); // '1547109020000'
console.log(a.unix()); // '1547109020'

// 月
console.log(a.format('M')); // '1'
console.log(a.format('MM')); // '01'
console.log(a.format('MMM')); // 'Jan'
console.log(a.format('MMMM')); // 'January'

// 曜日
console.log(a.format('d')); // '4'
console.log(a.format('dd')); // 'Th'
console.log(a.format('ddd')); // 'Thu'
console.log(a.format('dddd')); // 'Thursday'

参考
- https://day.js.org/docs/en/display/format

言語設定
( locale )

曜日などの表示を日本語表記するには localeメソッド を利用します。

import dayjs from 'dayjs';

// プラグインが必要
import ja from 'dayjs/locale/ja';
dayjs.locale(ja);

const a = dayjs('2019-01-10 17:30:20');

// 月
console.log(a.format('M')); // '1'
console.log(a.format('MM')); // '01'
console.log(a.format('MMM')); // '1月'
console.log(a.format('MMMM')); // '1月'

// 曜日
console.log(a.format('d')); // '4'
console.log(a.format('dd')); // '木'
console.log(a.format('ddd')); // '木'
console.log(a.format('dddd')); // '木曜日'

タイムゾーンの操作

import dayjs from 'dayjs';

// プラグインが必要
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';

dayjs.extend(utc);
dayjs.extend(timezone);

console.log(dayjs.tz.guess()); // Asia/Tokyo

// tzメソッドを実行したときに適用されるタイムゾーンを設定
dayjs.tz.setDefault('America/Los_Angeles');
console.log(dayjs.tz('2019-01-10 07:30:20').format()); // 2019-01-10T07:30:20-08:00
console.log(dayjs('2019-01-10 07:30:20').format()); // 2019-01-10T07:30:20+09:00

dayjs.tz.setDefault('Asia/Tokyo');
console.log(dayjs.tz('2019-01-10 07:30:20').format()); // 2019-01-10T07:30:20+09:00

dayjs.tz.setDefault('Europe/London');
console.log(dayjs.tz('2019-01-10 07:30:20').format()); // 2019-01-10T07:30:20Z

// タイムゾーン変更
console.log(dayjs('2019-01-10 07:30:20').tz('America/Los_Angeles').format()); // 2019-01-09T14:30:20-08:00
console.log(dayjs('2019-01-10 07:30:20').tz('Asia/Tokyo').format()); // 2019-01-10T07:30:20+09:00
console.log(dayjs('2019-01-10 07:30:20').tz('Europe/London').format()); // 2019-01-09T22:30:20Z