How to display ordinal number for date in javascript

Question

I am currently implementing flatpickr for my pop-up calendars on my site, and my client has requested to show a specific format for their own use which includes the day of the week, and date with ordinal suffix. As I understand it, I can use a config setting called altInput to acheive this, and use altFormat to specify exactly how to display it.

Based on this, here is my config and instantiation:

var config = {
    enableTime : false,
    dateFormat: 'Y-m-d',
    altInput: true,
    altFormat: 'l, jS F Y'
};

$(".pickr").flatpickr(config);

As far as I am concerned, the displayed date should be as follows (using today as the picked date):

Tuesday, 10th October 2017

However, I actually get:

Tueaday 1000 October 2017

So it seems the ordinal suffix option (which according to PHP.net is an uppercase S) just displays two zeros. It's almost as if it's treating the uppercase S as a lowercase s, which is for seconds.

Am I missing something here? Is there another way to display the ordinal suffix in javascript?

as the (one thought out) answer suggests, if you use flatpickr, then refer to flatpickr documentation ... javascript has no date formatting like PHP — Jaromanda X, Oct 10 '17 at 10:01

score 3 · Accepted Answer · answered Oct 10 '17 at 09:57

3

That S stands for "Seconds, 2 digits"

Instead of jS, you want J:

"Day of the month without leading zeros and ordinal suffix"

Take a look at flatpickr's formatting documentation.

answered Oct 10 '17 at 09:57

Cerbrus

70,800
18
132
147

score 0 · Answer 2 · answered Oct 10 '17 at 10:17

According to Formatting Tokens you should use on altFormat configuration the argument J instead of jS :

var config = {
    enableTime : false,
    dateFormat: 'Y-m-d',
    altInput: true,
    altFormat: 'l, J F Y'
};

I've put on the Fiddle for more testing : https://jsfiddle.net/kxssqzu2/14/

How to display ordinal number for date in javascript

2 Answers2