why does not my jQuery date picker UI plugin not show up/down arrows in the year field

Question

As per this problematic example, I can't seem to get the up and down arrows to choose a date earlier than 2001 or later than 2021.

Education Record
    did you complete high school? * --> Yes
    clicking Graduation Date *  
        clicking 2013 down arrow

any ideas what's causing this? The scroll arrows do not show up at all in IE10 in windows 7 and in Firefox the scroll arrows are shown but it can not be scrolled before 2001 or after 2021. The work around is to choose the min or max date and click the arrow again to show before or after years.

Answer 1

Try this- jsFiddle

$(function () {
 $("#datepicker").datepicker({
     changeMonth: true,
     changeYear: true,
     yearRange: "-120:+10", // magic!
     dateFormat: 'mm/yy',
     onClose: function (dateText, inst) {
         var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
         var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
         $(this).datepicker('setDate', new Date(year, month, 1));
     }
  });
});

API Documentation for yearRange

Answer 2

As i see in your screenshot that you're using IE10 which is has a freaky style a bit. Your select dropdown list will work fine in good browsers such as Chrome, FF, Safari, etc... am pretty sure if you set a fixed height for the select element which is has
.ui-datepicker-year class, for example height: 150px; and add overflow: auto; hope this helps

Answer 3

In jQuery-UI you can easily specify years range and default date.

    $( "#specific_birthdate" ).datepicker( {
        yearRange : "1950:2011",
        changeYear : true,
        defaultDate : new Date(1970, 0, 1, 0, 0, 0, 0)
    } );