Having a bit of an issue with the JQuery datePicker, I suspect it's just the matter of a setting I've overlooked or got wrong.

If you look at this simple fiddle: JS Fiddle

You'll see I've set the year range, so that the by default when you click on the input it will open it up on 1994, but if you then click on any of those dates, e.g. 3rd Sept, it'll actually put it in the input as 2012 still, rather than the year that is selected in the drop down menu.

How can I make it so that it uses the correct year without having to change the drop down and then change it back again?

Cheers.

Having a bit of an issue with the JQuery datePicker, I suspect it's just the matter of a setting I've overlooked or got wrong.

If you look at this simple fiddle: JS Fiddle

You'll see I've set the year range, so that the by default when you click on the input it will open it up on 1994, but if you then click on any of those dates, e.g. 3rd Sept, it'll actually put it in the input as 2012 still, rather than the year that is selected in the drop down menu.

How can I make it so that it uses the correct year without having to change the drop down and then change it back again?

Cheers.

• javascript
• jquery
• jquery-ui

• It seems to be a Datepicker Jquery Plugin bug... I have the same problem with : yearRange: "1994:2010" – Aelios Commented Sep 13, 2012 at 13:53
• maybe it's already filled as bug code.google.com/p/jquery-datepicker/issues/detail?id=177 – Anirudha Gupta Commented Sep 13, 2012 at 14:01
• That is not the same bug that this could be... – David Barker Commented Sep 13, 2012 at 14:03

3 Answers 3

As others have suggested, you have to set the defaultDate. However, unlike the other solutions, you don't want to hardcode the date since your dropdown list will be updating as the years pass since you're doing a relative list.

Try this instead...

function loadDatePicker() {
    $('.datePicker').datepicker({
        dateFormat: 'yy-mm-dd',
        changeYear: true,
        changeMonth: true,
        yearRange: "-18:-12",
        defaultDate:"-18y-m-d"  // Relative year/month/day
    });
}

Weird, but adding defaultDate:"1994-01-01" to the datepicker options seems to fix it.

Fiddle

I think I got the reason.. It is because yearRange: just restrict the range in dropdown menu only. It just change the list nothing else.

They mansion this over here..

http://jqueryui.com/demos/datepicker/#option-yearRange [Note that this option only affects what appears in the drop-down, to restrict which dates may be selected use the minDate and/or maxDate options.]

To Prove this .. set date picker as below and you will find all date disable. because it sawing us the calander of 2012 not 1994

$('.datePicker').datepicker({
         dateFormat: 'yy-mm-dd',
         changeYear: true,
         changeMonth: true,
         yearRange: "-18:-12",
         maxDate: new Date(2012,1-1,1)

     });

To fix it you have to use defaultDate as well as minDate and maxDate

i hope i am clear