使用 Moment.js 显示 24 小时而不是 12 小时

Question

如何显示 24 小时而不是 12 小时。我想利用 calendar() 函数。

代码：

<p className="item__subtitle">{moment(props.note.updatedAt).locale('en-gb').calendar()}</p>

输出：

Today at 3:17 PM

Answer 1

默认时间格式为LT，所以需要修改为HH:mm。(moment/calendar.js at master · moment/moment)

您可以像这样在第二个参数中设置calendar 的格式。

.calendar(null, {
    lastDay : '[Yesterday at] HH:mm',
    sameDay : '[Today at] HH:mm',
    nextDay : '[Tomorrow at] HH:mm',
    lastWeek : '[last] dddd [at] HH:mm',
    nextWeek : 'dddd [at] HH:mm',
    sameElse : 'L'
})

完整代码：

<p className="item__subtitle">{moment(props.note.updatedAt).locale('en-gb').calendar(null, {
    lastDay : '[Yesterday at] HH:mm',
    sameDay : '[Today at] HH:mm',
    nextDay : '[Tomorrow at] HH:mm',
    lastWeek : '[last] dddd [at] HH:mm',
    nextWeek : 'dddd [at] HH:mm',
    sameElse : 'L'
})}</p>

如果您想更改所有calendar 的格式，您可以像这样将格式设置为区域自定义。 （来自Customize > Calendar | Moment.js | Docs）

// From 2.12.0 onward
moment.updateLocale('en-gb', {
    calendar : {
        lastDay : '[Yesterday at] HH:mm',
        sameDay : '[Today at] HH:mm',
        nextDay : '[Tomorrow at] HH:mm',
        lastWeek : '[last] dddd [at] HH:mm',
        nextWeek : 'dddd [at] HH:mm',
        sameElse : 'L'
    }
});

// From 2.8.1 to 2.11.2 : `moment.locale('en-gb', {calendar : {...  
// Deprecated in 2.8.1 : `moment.lang('en-gb', {calendar : {...

Answer 2

如果您还没有加载语言环境数据，您将看到此行为，因为如果找不到en-gb，它会回退到en（此时相当于en-us）。

要么使用moment-with-locales 文件，要么使用moment 和en-gb 语言环境文件。