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

by

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 🙂

More Related Contents:

  1. jQuery Date Picker – disable past dates
  2. jQuery UI Datepicker – Multiple Date Selections
  3. Unobtrusive validation in Chrome won’t validate with dd/mm/yyyy
  4. How to get the selected date value while using Bootstrap Datepicker?
  5. Disable specific days of the week on jQuery UI datepicker [duplicate]
  6. jQuery UI Datepicker – Disable specific days
  7. jQuery UI Datepicker enable only specific days in array
  8. Jquery datepicker – only day and month
  9. how to add a day to a date using jquery datepicker
  10. Changing minDate and maxDate on the fly using jQuery DatePicker
  11. Jquery Date picker Default Date
  12. JQuery Datepicker – no default date
  13. Downloading jQuery UI CSS from Google’s CDN
  14. jQuery UI Datepicker onchange event issue
  15. jQuery ui datepicker with Angularjs
  16. jQuery drag and drop simulation does not work for the last draggable
  17. jquery UI Sortable with table and tr width
  18. Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog
  19. Restrict jQuery draggable items from overlapping/colliding with sibling elements
  20. How can I make a jQuery UI ‘draggable()’ div draggable for touchscreen?
  21. SVG draggable using JQuery and Jquery-svg
  22. How to dynamically set bootstrap-datepicker’s date value?
  23. How to detect if a browser is Chrome using jQuery?
  24. Select only specific dates in jQuery UI datepicker (date list comes from AJAX)
  25. How can I position my jQuery dialog to center?
  26. jQuery UI Autocomplete – menu disappears on hover
  27. changing location.hash with jquery ui tabs
  28. jQuery document ready function
  29. jQuery UI – Droppable only accept one draggable
  30. how to close a bootstrap modal with the browser back button instead of going back a page?`

Leave a Comment