如何自定義date-fns的formatRelative？

Question

此刻，有了calendar ，我可以自定義如何顯示時間，如下所示

moment(dateTime).calendar(null, {
    sameDay: '[Today]',
    nextDay: '[Tomorrow]',
    nextWeek: 'dddd',
    lastDay: '[Yesterday]',
    lastWeek: '[Last] dddd',
    sameElse: 'DD/MM/YYYY'
});

在 date-fns 中，基於formatRelative ，我可以提供options 。

formatRelative(dateTime, Date.now(), options);

但是，閱讀options文檔后，我仍然無法弄清楚如何自定義它。

任何指南都會有所幫助。 謝謝

Answer 1

盡管 date-fns 不支持進行部分覆蓋的本地方法（尚），但您可以執行以下操作，以進行一些手動調整（此處由德國語言環境顯示）：

import { formatRelative } from 'date-fns';
import { de } from 'date-fns/esm/locale';

const formatRelativeLocale = {
  lastWeek: '[letzten] dddd [um] LT',
  yesterday: '[gestern um] LT',
  today: '[heute um] LT',
  tomorrow: '[morgen um] LT',
  nextWeek: 'dddd [um] LT',
  other: 'L LT', // Difference: Add time to the date
};

const locale = {
  ...de,
  formatRelative: token => formatRelativeLocale[token],
};

const text = formatRelative(date, new Date(), { locale });

Answer 2

已接受答案的更新：在date-fns的最新版本中，格式字符串看起來略有不同（單引號而不是大括號）：

import { formatRelative } from 'date-fns';
import { de } from 'date-fns/esm/locale';

const formatRelativeLocale = {
  lastWeek: "'letzten' dddd 'um' LT",
  yesterday: "'gestern um' LT",
  today: "'heute um' LT",
  tomorrow: "'morgen um' LT",
  nextWeek: "dddd 'um' LT",
  other: 'L LT', // Difference: Add time to the date
};

const locale = {
  ...de,
  formatRelative: token => formatRelativeLocale[token],
};

const text = formatRelative(date, new Date(), { locale });

另請參閱date-fns源中指定的格式字符串示例。

Answer 3

現在有一個名為“formatRelative”的 function 可用。 文檔鏈接： https://date-fns.org/v2.29.3/docs/formatRelative