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

Question

我遵循严格的用户界面指南，我需要以上标（<sup>）显示日期后缀：

  

18 ^th 2015年9月

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"

但问题是，由于我必须使用三个单独的format()电话，因此在显示类似于＆＃34; 2015年9月18日和＃34;之类的内容时会变得混乱：

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

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

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

我很欣赏OP希望避免使用正则表达式，但这是一个可能对其他人有益的简单解决方案。

Answer 2

我不认为MomentJS具有您正在寻找的功能;我说你应该去MomentJS网站并将其作为功能建议提交。你永远不知道，它甚至可能得到实施。

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

请参阅MomentJS手册中的相关部分：http://momentjs.com/docs/#/customization/ordinal/

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

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

以上示例直接取自MomentJS的手册，仅修改return行。

Answer 3

上面的答案都很好，但是由于我使用的反应性矩对我不起作用。

我只使用了内置的filter函数，在文档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>

像魅力一样工作！结果如下：

edit：我以前忘记输入月份名称，因此8月的st在测试过程中也被替换了：）我添加了一个小组，检查数字后的st并解决了这个问题。使用正则表达式向其他任何更优雅的解决方案开放。我无法使用标签，因为它是react-moment的字符串。让我知道是否有人可以工作。

Answer 4

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');