Skip to content

MomentJS - 定制

现代日期/时间:定制 Moment.js 语言环境

Section titled “现代日期/时间:定制 Moment.js 语言环境”

Moment.js 允许对其语言环境(locale)设置进行广泛定制,使您能够根据特定区域或应用程序需求精确调整日期和时间的显示方式。这对于覆盖默认翻译或格式特别有用。

请记住关于 Moment.js 的通用建议:它功能强大但处于维护模式。对于新项目,请考虑替代方案。

您可以使用 moment.updateLocale(localeName, config) 定制语言环境的各个方面。如果该语言环境不存在,它将被创建。config 对象可以包含以下属性:

定制区域描述与配置键
月份名称months: 包含 12 个完整月份名称的数组(例如,[‘一月’, …])。
月份缩写monthsShort: 包含 12 个月份缩写的数组(例如,[‘一月’, …])。
星期名称weekdays: 包含 7 个完整星期名称的数组(从周日开始,例如,[‘星期日’, …])。
星期缩写weekdaysShort: 包含 7 个星期缩写的数组(例如,[‘周日’, …])。
最小星期缩写weekdaysMin: 包含 7 个最小星期缩写的数组(例如,[‘日’, …])。
完整日期格式longDateFormat: 一个对象,将格式令牌(LT, LTS, L, LL, LLL, LLLL)映射到自定义格式字符串(例如,{ L: ‘YYYY/MM/DD’ })。
相对时间(例如,“5 分钟内”)relativeTime: 一个对象,定义过去/将来持续时间的模板(s, m, mm, h, hh, d, dd, M, MM, y, yy)。
上午/下午指示符meridiem: 一个函数,根据小时、分钟和 isLower 返回适当的上午/下午字符串。
上午/下午解析meridiemParse: 用于在解析时匹配上午/下午指示符的正则表达式。
日历时间(例如,“今天下午 2:00”)calendar: 一个对象,定义不同时间关系的格式(sameDay, nextDay, lastDay, nextWeek, lastWeek, sameElse)。
序数(例如,“第 1 个”、“第 2 个”)ordinal: 一个函数,返回给定数字的序数后缀(例如,日语中的 %d日)。
相对时间阈值relativeTimeThresholds: 一个对象,用于配置 duration.humanize() 的阈值(例如,{ s: 45, ss: 44, m: 45, … })。ss 用于表示小于一秒的持续时间。

我们来修改法语语言环境(‘fr’),使用不同的短日期格式并定制“几秒钟前”的消息。

// Ensure French locale is loaded if not using moment-with-locales.js
// import 'moment/locale/fr'; // Or require('moment/locale/fr');
moment.updateLocale('fr', {
longDateFormat : {
L : 'DD-MM-YYYY', // Change short date format
LL : 'D MMMM YYYY',
LLL : 'D MMMM YYYY HH:mm',
LLLL : 'dddd D MMMM YYYY HH:mm',
LT : 'HH:mm',
LTS : 'HH:mm:ss'
},
relativeTime : {
future : 'dans %s',
past : 'il y a %s',
s : 'quelques secondes', // Customize 'a few seconds'
ss: '%d secondes', // Add customization for sub-second durations if needed
m : 'une minute',
mm : '%d minutes',
h : 'une heure',
hh : '%d heures',
d : 'un jour',
dd : '%d jours',
M : 'un mois',
MM : '%d mois',
y : 'un an',
yy : '%d ans'
}
});
// Now use the customized locale
moment.locale('fr');
console.log(moment().format('L')); // Output: e.g., 26-10-2023
console.log(moment().subtract(5, 'seconds').fromNow()); // Output: il y a quelques secondes

这种定制会持续生效,直到该语言环境再次更新或页面重新加载。

  • 先加载基础语言环境:确保您要定制的基础语言环境已加载,然后再调用 updateLocale。
  • 全局生效:updateLocale 会全局修改语言环境。
  • 复杂性:虽然功能强大,但深度定制可能会变得复杂。请确保所做更改经过充分测试。

请参考 Moment.js 文档了解语言环境配置对象的完整结构:https://momentjs.com/docs/#/customization/