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

datepicker, jquery, jquery-ui

Solution

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 $('<div />').append(header).html();
}

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

Problem

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 it starts at 1999 and counts upwards. I can't seem to find an easy solution to reverse this order?

Original source