jQueryUI DatePicker YearRange and ChangeYear problems

Question

I have a datepicker on an application form. We only allow applications where the date of birth is within a certain age range. I enabled ChangeYear and set the YearRange to "-65:-16". The problems I am having are as follows:

1 - When I select a date without first selecting something in the year dropdown, I get the correct month and day, but I get 2016 as a year.

2 - Trying to fix this I set the YearRange to "n-65:n-16". That causes the year dropdown to only display the current year (2010). Even weirder is that if you select a date, you still get the correct month and day, and the year 2016.

Here is the code I use to setup the datepicker:

    <script type="text/javascript">
    $(document).ready(function (e) {
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

        function EndRequestHandler(sender, args) {
            $(function () {
                $("#DateOfBirth").datepicker({ yearRange: '-65:-13', changeMonth: true, changeYear: true, defaultDate: '1-1-1994', dateFormat: 'mm-dd-yy' })
            });
        }

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

I am hoping this is something I have done wrong, and someone can tell me what that is. Thanks for any help.

Answer 1

Try using 'c' for the current year like:

$('.datepicker').datepicker({changeYear: true, yearRange : 'c-65:c+10'});

for more information view http://api.jqueryui.com/datepicker/#option-yearRange

Answer 2

Check your defaultDate setting. I can only see what you're describing when I change the default date to something outside of the specified year range (i.e. '1-1-2016'.) Everything else in the code you posted worked for me.

Answer 3

Stumbled upon this as well. I did not research it further, but the call order seems to make a difference.

this works:

$('DIV#startdate').datepicker( 'option', { dateFormat: 'yy-mm-dd' } );
$('DIV#startdate').datepicker( 'setDate', '10-09-11' );
$('DIV#startdate').datepicker( 'option', { changeYear: true } );

this shows the year listbox with only 2010:

$('DIV#startdate').datepicker( 'option', { dateFormat: 'yy-mm-dd' } );
$('DIV#startdate').datepicker( 'option', { changeYear: true } );
$('DIV#startdate').datepicker( 'setDate', '10-09-11' );

Answer 4

Try giving the range with actual year values. e.g.

$('.datepicker').datepicker({changeYear: true, yearRange : '1990:2010'})

They should also work with any dateformat.

Answer 5

Try using the maxDate and minDate option like:

$(document).ready(function () {
    $("#datepicker").datepicker({
        yearRange: '-65:-13',
        changeMonth: true,
        changeYear: true,
        defultDate: '1-1-1994',
        dateFormat: 'mm-dd-yy',
        minDate:"-65Y",
        maxDate:"-13Y" 
    });
});