jQuery UI Datepicker Customization

Overview :

The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to our web pages. As we all know, we can customize the style, date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.

We came across a scenario where we needed the order of the years in the datepicker needs to be descending.

Example :

For a datepicker of the DOB its better if we have the year starting from current year and end in the least value we declare during initialization. i.e. from 2015 to 1955. Where as the original datepicker will have the years staring from the least value we assign i.e. from 1955 to 2015.

This change can be done by making a slight alteration in the base jquery UI script file. The changes are as follows.

There will be a section to generate the month and year header for the datepicker, a function named ‘_generateMonthYearHeader’:

Step 1 :

Find the ‘year selection’ section in that method





Step 2 :

Here the year list generated to display will initially be sorted ascending by default. We are now going to re-sort in descending order.





Step 3 :

We have added a new ‘for’ loop before the list is being created. Here, if the ‘reverseYearRange’ variable is ‘true’ the list will be sorted in descending order and ‘false’ gets a list in ascending i.e. the default order.

Step 4 :

Usage: The reverseYearRange variable should be assigned true where the datepicker is initialized for a textbox.

Note: The above change is made in jquery.ui version 1.8.24. The code snippet we discussed may have to be changed accordingly in the previous or newer versions.

---

Meyyappan M is a Junior Software Engineer at Span Technology Services