jqueryui datepicker not showing all years in range

Question

. Hello,

I'm using jqueryui's datepicker, and it works great but there's a problem. The list of year is not complete, for example it only show 10 years. If I want to go 10 years back I have to click on the first year and then click again to select one year

This are my settings:

    $.datepicker.setDefaults( $.datepicker.regional["es"] );
    $("#birth_date").datepicker(
    {
        shortYearCutoff: 1,
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd-mm-yy',
        minDate: "-70Y", 
        maxDate: "-15Y" 
    });

The first time it show this range 1997 to 1987, if I want to set 1960 then I have to click 2 times and it bothers sometimes.

What I want to know is if theres a way to show the entire year list, from 1942 to 1997

Thanks in advance

Javier

Answer 1

You need to use the yearRange option too. MaxDate and MinDate only validates the date chosen. Year range modifies the visible years.

$.datepicker.setDefaults( $.datepicker.regional["es"] );
    $("#birth_date").datepicker(
    {
        shortYearCutoff: 1,
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd-mm-yy',
        minDate: "-70Y", 
        maxDate: "-15Y",
        yearRange: "1942:1997"
    });

Answer 2

You want to add the year range option:

Demo: http://jsfiddle.net/lucuma/NAuEx/2/

$(document).ready(function() {
    $.datepicker.setDefaults( $.datepicker.regional["es"] );
    $("#birth_date").datepicker(
    {
        shortYearCutoff: 1,
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd-mm-yy',
        minDate: "-70Y", 
        maxDate: "-15Y",
         yearRange: "1900:2010" 
    });

});
​

Answer 3

Setting a more dynamic range will look like this in your case

yearRange: "-70Y:-15Y"