Day.jsで「〇〇日前」とかの相対日時を表示したいなと思ったときの備忘録。

この記事がわかりやすく、ほぼ引用。
- Day.jsで相対日時を厳密に表示する（thresholds）

相対日時を表示するのは、RelativeTimeプラグインを使えばOK

RelativeTime · Day.js

相対日時を表示する

import dayjs from "dayjs"

// 相対日時のプラグインを有効化
import relativeTime from "dayjs/plugin/relativeTime"
dayjs.extend(relativeTime)

// 日本語で ◯日前 のように表示する場合
import 'dayjs/locale/ja';
dayjs.locale('ja');

// 指定時刻から現在時刻との相対時間を取得
dayjs('2021-01-24T01:00:00').fromNow() // => 1時間前

これだけで相対日時を表示できるけど、
若干思ってたのと違う表示になる。。

以下のドキュメントを見てみると、
どうやら思ってる範囲と違うらしい。。

Time from now · Day.js

相対日時を厳密に表示する

表示する範囲はカスタマイズできるらしく、以下のドキュメントに書かれている設定をすると厳密になる。

Relative Time thresholds and rounding | Relative Time

// strict thresholds
var thresholds = [
  { l: 's', r: 1 },
  { l: 'm', r: 1 },
  { l: 'mm', r: 59, d: 'minute' },
  { l: 'h', r: 1 },
  { l: 'hh', r: 23, d: 'hour' },
  { l: 'd', r: 1 },
  { l: 'dd', r: 29, d: 'day' },
  { l: 'M', r: 1 },
  { l: 'MM', r: 11, d: 'month' },
  { l: 'y' },
  { l: 'yy', d: 'year' }
];
dayjs.extend(relativeTime, { thresholds });