Skip to main content

[note] dayjs 筆記

顯示時間(Display)#

基本 format#

import dayjs from 'dayjs';
const now = dayjs();
const format = now.format('DD/MM/YYYY'); // 07/08/2020

Time from X#

  • 需要使用 relativeTime 這個 plugin
import dayjs from 'dayjs';
// 使用 relativeTime plugin
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
const anHourAgo = dayjs().subtract(1, 'hour');
const timeFromNow = anHourAgo.fromNow(); // an hour ago

Difference#

取得兩個時間點之間的長度。

date1.diff('2018-06-05', <unit: string>, <float: bool>)
  • diff 的第二個參數可以放入要取得單位,預設是毫秒
  • diff 的第三個參數可以決定要不要顯示到小數點後位數

⚠️ 留意:如果要計算的是兩個時間點的間隔長度,而且需要取得多個時間單位,則要搭配使用 days#duration 這個 plugin。

import dayjs from 'dayjs';
const date1 = dayjs('2019-01-25');
const date2 = dayjs('2018-06-05');
const diffWithMS = date1.diff(date2); // 預設會顯示到毫秒,20214000000 default milliseconds
const diffWithMonth = date1.diff(date2, 'month'); // 7

i18n#

使用 locale 檔#

import 'dayjs/locale/zh-tw';
import dayjs from 'dayjs';
dayjs.locale('zh-tw'); // use locale
const formatLocale = dayjs('2019-01-25').format('DD/MMM/YYYY 星期dd'); // 25/1月/2019 星期五

Duration#

在 dayjs 中,dayjs 物件表示的是「時間點」;這裡的 duration 則是表示「一段時間的長度」,概念上比較像是「兩小時」而非「介於 2 點到 4 點之間」,如果你要計算是的是兩個時間點的差距,而且只需要一個時間單位時,應該要使用的是 dayjs#diff 方法

⚠️ 留意:如果要計算的是兩個時間點的間隔長度,而且只需要一個時間單位時,可以直接使用 days#diff 方法即可。

使用前需要先載入 duration plugin:

import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
dayjs.extend(duration);

Humanize#

  • 除了 duration plugin 之外,需要再搭配 relativeTime plugin
  • humanize 的時間可能沒這麼精確,但是人讀得懂的
// <durationObject>.humanize(<hasPrefix: bool>)
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(duration);
dayjs.extend(relativeTime);
const twoMonths = dayjs.duration({ months: 2 });
const humanizeDuration = twoMonths.humanize(false); // 2 months(沒有 prefix)
const humanizeDuration = twoMonths.humanize(true); // in 2 months(有 prefix)

Get Seconds, Minutes, Hours, Days, Weeks, Months, Years#

import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
dayjs.extend(duration);
const twoMonths = dayjs.duration(2, 'months');
const months = twoMonths.months(); // 2

搭配 diff 使用 duration#

若你希望搭配 dayjs#diff 來使用 duration 可以這麼做:

import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
dayjs.extend(duration);
const date1 = dayjs('2019-01-25');
const date2 = dayjs('2018-06-05');
const diffWithMonth = date1.diff(date2);
const durationWithDiff = dayjs.duration(diffWithMonth);
const months = durationWithDiff.months(); // 7
const days = durationWithDiff.days(); // 24(?)

直接使用 dayjs#diff 和搭配使用 dayjs#duration 的差異#

  • 透過 dayjs#diff 可以取得某兩個時間點之間的時間長度,但只能使用一個單位。
  • 若搭配 duration 使用的話,可以把 diff 取得的時間長度,轉換成多個不同的單位。
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(duration);
dayjs.extend(relativeTime);
const date1 = dayjs('2020-08-07T04:53:26.337Z');
const date2 = dayjs('2020-08-06T02:50:47.811Z');
const diffWithDay = date1.diff(date2, 'day');
const diffWithHour = date1.diff(date2, 'hour');
const diffWithMinute = date1.diff(date2, 'minute');
console.log({
diffWithDay,
diffWithHour,
diffWithMinute,
});
const diff = date1.diff(date2);
const durationWithDiff = dayjs.duration(diff);
const months = durationWithDiff.months(); // 7
const days = durationWithDiff.days(); // 24(?)
const hours = durationWithDiff.hours();
const minutes = durationWithDiff.minutes(); // 24(?)
console.log({
months,
days,
hours,
minutes,
});
console.log('after humanize', durationWithDiff.humanize(true)); // after humanize in a day
Last updated on