jQuery UI：Datepicker将年份范围下拉列表设置为100年

默认情况下，使用Datepicker的年份下拉列表仅显示10年。用户必须单击上一年才能获得更多的年份。

我们如何将初始范围设置为100年，以便用户默认情况下会看到一个大列表？

    function InitDatePickers() {
        $(".datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            maxDate: '@maxDate',
            minDate: '@minDate'
        });
    }

您可以在以下文档中使用每个文档的此选项来设置年份范围：http：//api.jqueryui.com/datepicker/#option-yearRange

yearRange: '1950:2013', // specifying a hard coded year range

或者这样

yearRange: "-100:+0", // last hundred years

来自文档

默认值：“ c-10：c + 10”

在年份下拉列表中显示的年份范围：相对于今天的年份（“ -nn：+ nn”），相对于当前选定的年份（“ c-nn：c + nn”），绝对值（“ nnnn： nnnn”）或这些格式的组合（“ nnnn：-nn”）。请注意，此选项仅影响下拉菜单中显示的内容，以限制可以使用minDate和/或maxDate选项选择的日期。

这对我来说非常有效。

ChangeYear：-设置为true时，表示可以选择当月日历中指示的上个月或下个月的单元格。该选项与options.showOtherMonths设置为true一起使用。

YearRange：-指定年份下拉列表中的年份范围。（默认值：“-10：+10”）

例：-

$(document).ready(function() {
    $("#date").datepicker({
    changeYear:true,
    yearRange: "2005:2015"
    });
});

参考：- 在jQuery datepicker中设置年份范围

我这样做：

var dateToday = new Date();
var yrRange = dateToday.getFullYear() + ":" + (dateToday.getFullYear() + 50);
and then
yearRange : yrRange

50当前年份的范围在哪里。

您可以在jQuery UI datepicker中使用此选项设置年份范围：

yearRange: "c-100:c+0", // last hundred years and current years

yearRange: "c-100:c+100", // last hundred years and future hundred years

yearRange: "c-10:c+10", // last ten years and future ten years

考虑到最初的问题发布了多久，现在提出这个建议还为时已晚，但这就是我所做的。

我需要一个70年的范围，虽然不超过100年，但对于访问者来说，滚动仍然是很多年。（jQuery确实会逐年分组，但这对大多数人来说是一个痛苦的时刻。）

第一步是修改datepicker小部件的JavaScript：在jquery-ui.js或jquery-ui-min.js（将其最小化）中找到以下代码：

for (a.yearshtml+='<select class="ui-datepicker-year" onchange="DP_jQuery_'+y+".datepicker._selectMonthYear('#"+
a.id+"', this, 'Y');\" onclick=\"DP_jQuery_"+y+".datepicker._clickMonthYear('#"+a.id+"');\">";b<=g;b++)
 a.yearshtml+='<option value="'+b+'"'+(b==c?' selected="selected"':"")+">"+b+"</option>";
a.yearshtml+="</select>";

并替换为：

a.yearshtml+='<select class="ui-datepicker-year" onchange="DP_jQuery_'+y+
 ".datepicker._selectMonthYear('#"+a.id+"', this, 'Y');
 \" onclick=\"DP_jQuery_"+y+".datepicker._clickMonthYear('#"+a.id+"');
 \">";
for(opg=-1;b<=g;b++) {
    a.yearshtml+=((b%10)==0 || opg==-1 ?
        (opg==1 ? (opg=0, '</optgroup>') : '')+
        (b<(g-10) ? (opg=1, '<optgroup label="'+b+' >">') : '') : '')+
        '<option value="'+b+'"'+(b==c?' selected="selected"':"")+">"+b+"</option>";
}
a.yearshtml+="</select>";

这用OPTGROUP标签围绕了几十年（当前除外）。

接下来，将其添加到您的CSS文件中：

.ui-datepicker OPTGROUP { font-weight:normal; }
.ui-datepicker OPTGROUP OPTION { display:none; text-align:right; }
.ui-datepicker OPTGROUP:hover OPTION { display:block; }

这将隐藏几十年，直到访问者在基准年之前使用鼠标。您的访客可以快速滚动任意年。

随意使用；请在您的代码中提供适当的归属。

我想实现日期选择器来选择出生日期，但我yearRange很难更改它，因为它似乎不适用于我的版本（1.5）。我在这里更新到了最新的jquery-ui datepicker版本：https : //github.com/uxsolutions/bootstrap-datepicker。

然后我发现他们提供了这个非常有用的即时工具，因此您可以配置整个日期选择器，并查看必须使用的设置。

这就是我发现该选项的方式

defaultViewDate

是我一直在寻找的选项，但在网上找不到任何结果。

因此，对于其他用户：如果您还想提供日期选择器来更改生日，我建议使用以下代码选项：

$('#birthdate').datepicker({
    startView: 2,
    maxViewMode: 2,
    daysOfWeekHighlighted: "1,2",
    defaultViewDate: { year: new Date().getFullYear()-20, month: 01, day: 01 }
});

打开日期选择器时，将从视图开始选择相对于当前年份的20年。