Adding "st, nd, rd, th" to jquery datepicker

Question

How can I add st,nd,rd,th to date format.. i.e. November 19th, or December 2nd, etc.

Currently, I have following code

    $( "#datepicker" ).datepicker({
        altField: "#alternate",
        altFormat: "DD, MM d ",
                    minDate: +0
    });

The format relies on [`formatDate()`](http://docs.jquery.com/UI/Datepicker/formatDate), looking at the docs it doesn't seem to support that particular format — Clive, Nov 20 '11 at 03:25

Renato S. Martins · Answer 1 · 2012-08-26T05:31:18.400

14

Since formatDate() doesn't have that option.

Edit: Yes, you were right, sorry my answer didn't help you, I'm new to SO. I hope it helps this time :)

Add an onSelect function to datepicker init, something like this:

$("#datepicker").datepicker({
    altField: "#alternate",
    altFormat: "DD, MM d",
    minDate: +0,
    onSelect: function(dateText, inst) {
        var suffix = "";
        switch(inst.selectedDay) {
            case '1': case '21': case '31': suffix = 'st'; break;
            case '2': case '22': suffix = 'nd'; break;
            case '3': case '23': suffix = 'rd'; break;
            default: suffix = 'th';
        }

        $("#alternate").val($("#alternate").val() + suffix);
    }
});

It adds the suffix to the alternate field each time you select a date.

edited Aug 26 '12 at 05:31

answered Nov 20 '11 at 03:34

Renato S. Martins

223
1
8

That link doesn't seem to be answered either. – dave Nov 20 '11 at 04:05
2

Worked perfectly for me, although you should also apply 'st' for the cases `21` and `31`, apply 'nd' for `22`, and apply 'rd' for `23`. Since javascript drops through on case statements until it sees a `break` you can just add `case '21': case '31':` after `case '1':` and before `suffix` (and likewise for the other numbers) – stevendesu Jul 26 '12 at 17:40

score 5 · Answer 2 · answered Oct 10 '12 at 16:08

5

Chris West has a pretty short and sweet definition for a function which generates ordinals for all integers. On this page he even shows how you can easily use his function to add ordinals to all numbers within a string.

answered Oct 10 '12 at 16:08

Yolanda Vaverek

109
1
1

score 2 · Answer 3 · answered Aug 10 '12 at 20:47

    // Get the ordinal suffix for the given int value
var ordinalSuffix = function (val) {
var mod = val % 10;
if (mod === 1 && val !== 11) {
return 'st';
} else if (mod === 2 && val !== 12) {
return 'nd';
} else if (mod === 3 && val !== 13) {
return 'rd';
} else {
return 'th';
}
};

thecoolmacdude · Answer 4 · 2013-03-20T16:50:55.210

2

According to grammar rules, you should not add "th", "nd", "rd", and "st" to dates when displaying it like "March 3" or "April 31, 2003". You only use these when you are displaying the "6th of March" or the "23rd of June".

See this for more information.

edited Mar 20 '13 at 16:50

answered Mar 20 '13 at 16:06

thecoolmacdude

2,036
1
23
38

score 0 · Answer 5 · answered Feb 05 '13 at 06:02

0

Does this help?

do = day + ((20 - day >= 0) ? "th" : ["st","nd","rd"][(day % 10) - 1] || "th");
console.log(do);

answered Feb 05 '13 at 06:02

Exception

8,111
22
85
136

score 0 · Answer 6 · answered Sep 30 '13 at 11:39

I realise that this is an old question but I thought I'd post my solution in-case anyone having the same problem finds this post. This method doesn't break the selected date when opening the calendar etc. This uses the format d{suffix} M yy i.e. '30th Sep 2013'

$.datepicker.origParseDate = $.datepicker.parseDate;
$.datepicker.parseDate = function(format, value, settings) {
  if ( $.isPlainObject(format) && format.hasOwnProperty('parse') && $.isFunction(format.parse) ) {
    return format.parse.call(this, value, settings, $.datepicker.origParseDate);
  } else {
    $.datepicker.origParseDate(format, value, settings);
  }
};
$.datepicker.origFormatDate = $.datepicker.formatDate;
$.datepicker.formatDate = function(format, date, settings) {
  if ( $.isPlainObject(format) && format.hasOwnProperty('format') && $.isFunction(format.format) ) {
    return format.format.call(this, date, settings, $.datepicker.origFormatDate);
  } else {
    $.datepicker.origFormatDate(format, date, settings);
  }
};

$('.datepicker').datepicker({
  dateFormat: {
    parse: function(value, settings, originalParseDate) {
      value = value.replace(/[a-z][^\s]+/, '');
      return originalParseDate.call(this, 'd M yy', value, settings);
    },
    format: function(date, settings, originalFormatDate) {
      date = originalFormatDate.call(this, 'd M yy', date, settings).split(' ');
      date[0] += (function(n) {
        n = (+n % 100).toString().split('');
        if (n.length > 1 && n.shift() === '1' || +n[0] > 3) {
          return 'th';
        } else {
          return ['th', 'st', 'nd', 'rd'][+n[0]];
        }
      })(date[0]);
      return date.join(' ');
    }
  }
});

hiptomorrow · Answer 7 · 2014-02-03T12:49:33.503

dateFormat doesn't use "s" as a format type, so in the options I usually add -

dateFormat : "DD ds MM, yy",
onSelect: function(dateText, inst) {
    var arrOrd = new Array('0','st','nd','rd','th','th','th','th','th','th','th','th','th','th','th','th','th','th','th','th','th','st','nd','rd','th','th','th','th','th','th','th','st');
    var day = Number(inst.selectedDay);
    var suffix = arrOrd[day];       
    $(this).val($(this).val().replace(inst.selectedDay+"s",inst.selectedDay+suffix));
}

score 0 · Answer 8 · answered Nov 20 '11 at 04:08

0

Check out this pull request on the jqueryui repo : https://github.com/jquery/jquery-ui/pull/438

answered Nov 20 '11 at 04:08

pradeek

21,445
2
31
32

Adding "st, nd, rd, th" to jquery datepicker

8 Answers8

Linked

Related