Extract a date suffix with MomentJS to make it superscript

moment js
moment get day
moment compare dates
moment set locale
moment start of day
moment to string
moment is valid
moment from now

I'm following strict user interface guidelines and I need to display date suffixes in superscript (<sup>):

18th September 2015

MomentJS has a lot of functions for formatting dates, but unfortunately it doesn't seem to allow us to extract a date suffix (the th bit in the example above) without including the number before it...

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

Currently I'm stripping the numeric values before the suffix by using:

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

But the problem is that this gets messy when having to display things like "18th September 2015", as I'm having to use three separate format() calls:

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

I'm ideally looking to avoid using replace() altogether and to instead use something similar to this but with the Do part replaced with just the suffix:

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

Does MomentJS have any functionality to pull a date suffix by itself?

I don't think MomentJS has the function you're looking for; I'd say you should go to the MomentJS site and submit it as a feature suggestion. You never know, it might even get implemented.

In the meanwhile, an alternative option might be to use the configuration options in MomentJS to change the Ordinal strings (ie the suffixes) so that they include a <sup> tag.

See the relevant section in the MomentJS manual here: http://momentjs.com/docs/#/customization/ordinal/

You'd end up writing a function that looks like this:

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

The above example is lifted directly from MomentJS's manual, with just the return line being modified.

javascript, I don't think MomentJS has the function you're looking for; I'd say you should go to the MomentJS site and submit it as a feature suggestion. You never know, it  Instead of modifying the native Date.prototype, Moment.js creates a wrapper for the Date object. To get this wrapper object, simply call moment() with one of the supported input types. The Moment prototype is exposed through moment.fn. If you want to add your own functions, that is where you would put them.

I looked at this for my own project, but decided to go with a regex solution.

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

I appreciate the OP wanted to avoid regex, but this is a simple solution that may be beneficial to others.

Support for date in "nth" format? · Issue #144 · moment/momentjs , I am trying to covert the date to the day number followed by "st", "nd", to host and review code, manage projects, and build software together. Extract a date suffix with MomentJS to make it superscript. stackoverflow.com 7. Unit Testing Guzzle inside of Laravel Controller with PHPUnit. stackoverflow.com

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

You can use Do for a day with ordinal.

I use:

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

User Mark, 27 Pre-Select Images when opening WordPress 3.5 media manager · 21 fpdf page break issue · 12 Extract a date suffix with MomentJS to make it superscript. 12 Extract a date suffix with MomentJS to make it superscript Mar 14 '16 8 width:auto and fixed position Aug 7 '13 6 How do I format the post date in Wordpress?

String.prototype.sup(), Though some browsers might still support it, it may have already been HTML element that causes a string to be displayed as superscript. 7 Extract a date suffix with MomentJS to make it superscript Sep 18 '15 7 Unit Testing Guzzle inside of Laravel Controller with PHPUnit Oct 16 '15 5 Is it good practice to store large Data in session variable?

Date Picker plugin, Just drag and drop moment.js and DatePicker plugins from the Plugins list into Get more plugins Date format used to save into the field, in moment.js's parse+​string format class=\"tc-image-superscript tc-image-button\" width=\"22pt\" height=\"22pt\" "text": "export all" }, "$:/language/Buttons/ExportPage/Hint": { "​title":  To_Date function is used to convert strings into date values. For example you want to see what was the day on 15-aug-1947. The use the to_date function to first convert the string into date value and then pass on this value to to_char function to extract day.

Groovy date picker, This plugin aims to make it easy to use jQuery date picker and time picker. groovy (which spm meteor add momentjs:moment # meteor bower install moment --​save # bower The timezone is always zero UTC offset, as denoted by the suffix "Z". to Define a Date or Calendar Value subscript operator support in Groovy 1. Let’s take a look at the available date formats in Excel: As shown above, there are many different “numeric” and “textual” expressions for. Day (e.g. 1 or 01) Day of a week (e.g. Mon, or Monday) Month (e.g. 1, 01, Jan, January, J)

Comments
  • That's very interesting, I wasn't aware Moment allowed for customisation like this!
  • The feature is mainly intended for localisation (ie translations) but does come in handy for this kind of thing too.
  • As of moment 2.12 the function is moment.updateLocale('en',...)
  • Do doesn't extract the date ordinal like the question asks, it provides the date and the ordinal together.