如何自定义Day.js RelativeTime插件的相对时间输出格式？

刚好我之前也研究过Day.js这个RelativeTime插件的自定义配置，完全不用你说的那种拼接字符串的麻烦方法，直接通过本地化配置就能搞定，给你详细说下：

其实RelativeTime插件的所有输出文案，都是存在Day.js的本地化（locale）配置里的，我们只需要修改对应locale的relativeTime对象，就能定制自己想要的格式。

直接修改默认英文locale的配置 #

如果你用的是默认的英文环境，直接像下面这样配置就行：

import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'

// 先加载RelativeTime插件
dayjs.extend(relativeTime)

// 自定义相对时间格式
dayjs.locale('en', {
  relativeTime: {
    future: '%s from now',  // 未来时间的格式，%s会被替换成具体的时间数值+单位
    past: '%s ago',         // 过去时间的格式
    s: 'a few seconds',
    m: 'a minute',
    mm: '%d minutes',
    h: 'an hour',
    hh: '%d hours',
    d: 'a day',
    dd: '%d days',
    M: 'a month',
    MM: '%d months',
    y: 'a year',
    yy: '%d years'
  }
})

配置完之后测试一下：

console.log(dayjs().to(dayjs("2030-01-01"))); // 会输出你想要的 "5 years from now"
console.log(dayjs().to(dayjs("2020-01-01"))); // 过去时间会自动用past的格式，输出 "3 years ago"

保留原有locale配置，只修改需要的部分 #

如果你不想完全覆盖原有locale的所有配置，只想改future或者past的格式，可以先获取当前locale的配置，再做局部修改：

import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'

dayjs.extend(relativeTime)

// 获取当前默认的英文locale配置
const originalEnLocale = dayjs.Ls.en

// 只修改future的格式，其他保留原有配置
dayjs.locale('en', {
  ...originalEnLocale,
  relativeTime: {
    ...originalEnLocale.relativeTime,
    future: '%s from now'
  }
})

这种方式更稳妥，不会不小心覆盖掉其他你不需要修改的时间单位文案。而且完全不用你担心判断过去还是未来的问题，Day.js会根据时间的自动识别方向，自动套用future或者past的格式，完美避开你说的那种拼接字符串的麻烦。

备注：内容来源于stack exchange，提问作者lonix