使用 MomentJS 提取日期后缀使其成为上标

Question

我遵循严格的用户界面指南，我需要在上标中显示日期后缀 (<sup>)：

18^th September 2015

MomentJS 有很多格式化日期的函数，但不幸的是它似乎不允许我们提取日期后缀（上面示例中的 th 位）而不包括它前面的数字。 ..

                Token    Output
Month           Mo       1st 2nd ... 11th 12th
Day of Month    Do       1st 2nd ... 30th 31st
Day of Year     DDDo     1st 2nd ... 364th 365th
...

目前，我正在使用以下方法去除后缀前的数值：

date.format("Do").replace(/\d/g, "");
--> "18th" -> "th"

但问题是，当必须显示诸如“2015 年 9 月 18 日”之类的内容时，这会变得很混乱，因为我必须使用三个单独的 format() 调用：

var dateSuffix = "<sup>" + date.format("Do").replace(/\d/g, "") + "</sup">;
date.format("DD") + dateSuffix + date.format("MMMM YYYY");
--> "18<sup>th</sup> September 2015"

我希望完全避免使用 replace()，而是使用类似的东西，但 Do 部分仅替换为后缀：

moment(new Date()).format("DD<\sup>Do</\sup> MMMM YYYY");
--> "18<sup>18th</sup> September 2015"

MomentJS 是否具有自行提取日期后缀的功能？

Answer 1

我认为 MomentJS 没有您要找的功能；我会说你应该去 MomentJS 网站并将其作为功能建议提交。你永远不知道，它甚至可能会被实施。

与此同时，另一种选择可能是使用 MomentJS 中的配置选项来更改序号字符串（即后缀），以便它们包含 <sup> 标记。

在此处查看 MomentJS 手册中的相关部分：http://momentjs.com/docs/#/customization/ordinal/

您最终会编写如下所示的函数：

moment.locale('en', {
    ordinal: num => {
        const b = num % 10;
        const output = (~~(num % 100 / 10) === 1) ? 'th' :
            (b === 1) ? 'st' :
                (b === 2) ? 'nd' :
                    (b === 3) ? 'rd' : 'th';
        return num + '<sup>' + output + '</sup>';
    },
});

上面的例子是直接从 MomentJS 的手册中提取的，只修改了 return 行。

Answer 2

我为自己的项目查看了这个，但决定使用正则表达式解决方案。

myDate.format( 'Do MMMM YYYY' ).replace( /(\d)(st|nd|rd|th)/g, '<sup></sup>' );

我感谢 OP 想要避免正则表达式，但这是一个可能对其他人有益的简单解决方案。

Answer 3

D DD        1..31       Day of month
Do          1st..31st   Day of month with ordinal
DDD DDDD    1..365      Day of year

您可以使用 Do 一天的序号。

我使用：

moment().format('Do MMMM YYYY');

Answer 4

上面的答案都很好，但因为我使用的反应时刻对我不起作用。

我只是在文档中很好地解释了 react-moment 中的内置过滤器功能 here。

我写了一个简单的字符串替换函数如下（注意我把函数放在哪里）：

...render() {
    const toSuperFilter = (sup) => {
        let res=sup.replace(/(?<=[0-9])(?:st)/i, "ˢᵗ");
        res=res.replace(/(?<=[0-9])(?:nd)/i, "ⁿᵈ");
        res=res.replace(/(?<=[0-9])(?:rd)/i, "ʳᵈ");
        res=res.replace(/(?<=[0-9])(?:th)/i, "ᵗʰ");
        return res
    }
    return (...

然后在子组件中，我是这样传递的：

<Moment filter={toSuperFilter} format="Do MMM, YYYY">
    {`${date_variable}`}
</Moment>

工作起来很有魅力！这是结果：

编辑：我之前忘记考虑月份名称，所以八月的 st 在测试期间也被替换了 :) 我添加了一个在数字后检查 st 的组并解决了它。使用正则表达式打开任何其他更优雅的解决方案。我无法使用该标签，因为它是反应时刻的字符串。让我知道是否有人可以使该部分正常工作。

使用 MomentJS 提取日期后缀使其成为上标

Extract a date suffix with MomentJS to make it superscript

javascript

momentjs

18^th September 2015

使用 MomentJS 提取日期后缀使其成为上标

Extract a date suffix with MomentJS to make it superscript

javascript

momentjs

18th September 2015

18^th September 2015