为什么我的jQuery日期选择器UI插件不会在年份字段中显示向上/向下箭头

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.

根据这个有问题的例子，我似乎无法使用向上和向下箭头来选择早于2001年或晚于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.

是什么导致了这个？在Windows 7和Firefox中的IE10中根本没有显示滚动箭头，滚动箭头显示但是在2001年之前或2021之后无法滚动。解决方法是选择最小或最大日期并再次单击箭头在年之前或之后展示。

3 个解决方案

#1

Try this- jsFiddle

试试这个 - 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

yearRange的API文档

#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

正如我在你的截图中看到的那样，你正在使用IE10，它有一种怪异的风格。您选择的下拉列表可以在Chrome，FF，Safari等良好的浏览器中正常运行...我非常确定您是否为具有.ui-datepicker-year类的select元素设置了固定高度，例如height： 150像素;并添加overflow：auto;希望这可以帮助

#3

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

在jQuery-UI中，您可以轻松指定年份范围和默认日期。

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