JQuery UI Datepicker, reverse the order of the year in the dropdowns

Question

I have a datepicker with changeyear: true. The \'year\' drop down displays the title as 2009, then instead of the next year below the title being 2008, 2007, 2006 and so on

Answer 1

I wouldn't recommend editing the original ui.datepicker.js as Cuong suggested because your changes will be lost as soon as you or another developer replaces the file when a new version is released. Remembering what customisations have been made in order to re-apply is not practical. Instead, you can override the existing _generateMonthYearHeader method in your own separate JS like so:

// store original so we can call it inside our overriding method
$.datepicker._generateMonthYearHeader_original = $.datepicker._generateMonthYearHeader;

$.datepicker._generateMonthYearHeader = function(inst, dm, dy, mnd, mxd, s, mn, mns) {
  var header = $($.datepicker._generateMonthYearHeader_original(inst, dm, dy, mnd, mxd, s, mn, mns)),
      years = header.find('.ui-datepicker-year');

  // reverse the years
  years.html(Array.prototype.reverse.apply(years.children()));

  // return our new html
  return $('
').append(header).html();
}

I just wrote this for something I'm working on and it does the trick nicely :)