使用Datepicker,年份下拉菜单默认只显示10年。用户必须点击最后一年才能获得更多年份。
我们如何将初始范围设置为100年,以便用户在默认情况下看到一个大列表?
function InitDatePickers() {
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
maxDate: '@maxDate',
minDate: '@minDate'
});
}
现在提出这个建议有点晚了,因为最初的问题是在很久以前发布的,但这就是我所做的。
我需要一个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; }
这将隐藏几十年,直到访问者将鼠标移到基准年上。访问者可以快速浏览任意年份。
请随意使用这个;请在代码中注明出处。
您可以在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选项。