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\" ).datepi         


        

Answer 1

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.

Answer 2

Does this help?

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

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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