JQuery Datepicker dropdown for year only showing single year

Question

I have a datepicker on 2 fields: Start Date and End Date. After selecting the start date, the end date datepicker updates the min and max date options and also the yearRange option.

If I choose 29/12/2013, the user can only choose 10 days on from here for the end date.

So, I open the datepicker for the End Date which has a yearRange of 2013:2014 and the changeYear option set to true.

But the year dropdown list only display 2013. 2014 is not in the list.

If I click on the right arrow (next) of the datepicker to move to the next year, it moves to 2014 and then if I click on the year dropdown list 2014 is now displayed.

$("#EndDate").datepicker("option", "yearRange", '2013:2014');

If a put an alert in front of this code, then the dropdown for year year show both 2013 and 2014 as expected.

I am using JQuery 1.4.4

Answer 1

This question seems to address the same issue. It looks like you might not have the correct format for specifying your date range.

Answer 2

Found the solution:

Original code was setting the changeYear option to true before changing the yearRange option - this would not show the update range in the dropdown year list:

$("#EndDate").datepicker("option", "changeYear", true);
$("#EndDate").datepicker("option", "yearRange", yearRange);

Placing the changeYear option code after the yearRange option solved the issue. Now the droplist displays the range of years as expected. Thus, the ordering is of importance.

    $("#EndDate").datepicker("option", "yearRange", yearRange);
    $("#EndDate").datepicker("option", "changeYear", true);

Answer 3

Try this:

$(function () {
       $("#txtDateofBirth").datepicker({

           changeYear: true,
           dateFormat: 'dd/mm/yy',
           yearRange: '1970:2025'
       }
       );
   });