Question

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

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

enter image description here

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

Answer 1

您可以在此处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选项限制可以选择的日期。

Answer 2

这对我很有用。

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

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

示例： -

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

参考： - set year range in jquery datepicker

Answer 3

我这样做了：

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

其中50是当前年份的范围。

Answer 4

您可以在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

Answer 5

由于多长时间以前发布了原始问题，现在提出这个问题有点晚了，但这就是我所做的。

我需要一个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; }

这隐藏了几十年，直到访客老鼠超过基准年。您的访问者可以快速滚动任意数年。

随意使用;请在代码中给出正确的归属信息。

Answer 6

我想实现datepicker来选择生日，我遇到了更改yearRange的麻烦，因为它似乎与我的版本（1.5）无关。我在这里更新了最新的jquery-ui datepicker版本：https://github.com/uxsolutions/bootstrap-datepicker。

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

这就是我发现选项

的方式

defaultViewDate

是我正在寻找的选项，我没有找到搜索网络的任何结果。

所以对于其他用户：如果你还想提供datepicker来改变生日，我建议使用这个代码选项：

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

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

jQuery UI：Datepicker将年份范围下拉至100年

6 个答案: