I've got a jquery UI DatePicker with the following parameters:

changeMonth: true,
changeYear: true,
yearRange: "-16:-1",
dateFormat: 'dd-mm-yy'

It correctly displays only years 1996 till 2011. However, when I select a date for the first time, it's strangely displayed as 08-03-2012. 2012 is not even an option for selection in the datepicker, but this is the date which is then produced in my text box.

If I then select a date once again, it's correctly displayed - this only occurs for the first time.

Any ideas?

I've got a jquery UI DatePicker with the following parameters:

changeMonth: true,
changeYear: true,
yearRange: "-16:-1",
dateFormat: 'dd-mm-yy'

It correctly displays only years 1996 till 2011. However, when I select a date for the first time, it's strangely displayed as 08-03-2012. 2012 is not even an option for selection in the datepicker, but this is the date which is then produced in my text box.

If I then select a date once again, it's correctly displayed - this only occurs for the first time.

Any ideas?

• javascript
• jquery
• jquery-ui
• datepicker
• uidatepicker

2 Answers 2

You can set a default date in your range like this:

<script type="text/javascript">
$(function() {               
    $("#birthdate" ).datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "-16:-1",
        dateFormat: 'dd-mm-yy',
        defaultDate: '01-01-1996'
    });
});
</script>

Here is another way to set the default date with the first year of the range.

<script type="text/javascript">
var default_date = new Date(); //Create a new date object
default_date.setYear(date.getYear() - 16); //Substract the current year with the first year of the range

$(function() {               
    $("#birthdate" ).datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "-16:-1",
        dateFormat: 'dd-mm-yy',
        defaultDate: default_date 
    });
});
</script>