jQuery UI: Datepicker设置年份范围下拉到100年

使用Datepicker，年份下拉菜单默认只显示10年。用户必须点击最后一年才能获得更多年份。

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

enter image description here

    function InitDatePickers() {
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
maxDate: '@maxDate',
minDate: '@minDate'
});
}
350117 次浏览
小开
最佳答案

你可以使用每个文档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选项。

小开

我是这样做的:

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

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

小开

试试下面的方法:-

ChangeYear: -当设置为true时，表示在当前月份的日历中显示上一个月或下一个月的单元格 可选择。此选项与选项一起使用。showOtherMonths集 真的。< / p >

YearRange: -年份下拉框中的年份范围。(默认值:" -10:+10″)

例子:-

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

看到: 在jquery datepicker设置年份范围

小开

现在提出这个建议有点晚了，因为最初的问题是在很久以前发布的，但这就是我所做的。

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

是我一直在寻找的选项，但我在网上搜索时没有找到任何结果。

所以对于其他用户:如果你也想提供datepicker来更改生日，我建议使用以下代码选项:

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

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

小开

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

提交答案