jQuery UI:日期选择器将年份范围下拉列表设置为100年
jQuery UI:日期选择器将年份范围下拉列表设置为100年
提问于 2012-12-14 01:28:04
使用日期选择器，默认情况下，年份下拉列表仅显示10年。用户必须单击上一年才能添加更多年份。
我们如何将初始范围设置为100年，以便用户在默认情况下看到较大的列表？
function InitDatePickers() {
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
maxDate: '@maxDate',
minDate: '@minDate'
});
}回答 3
Stack Overflow用户
发布于 2014-11-26 10:13:32
我这样做了：
var dateToday = new Date();
var yrRange = dateToday.getFullYear() + ":" + (dateToday.getFullYear() + 50);
and then
yearRange : yrRange其中50是从当前年份开始的范围。
Stack Overflow用户
发布于 2019-01-04 14:38:04
您可以在jQuery UI日期选择器中使用此选项设置年份范围：
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 yearsStack Overflow用户
发布于 2016-08-11 00:43:32
考虑到最初的问题是在多久之前发布的，现在提出这个建议有点晚了，但这就是我所做的。
我需要一个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; }这隐藏了几十年，直到访问者将鼠标移到基年。您的访问者可以快速滚动浏览任意年份。
请随意使用它；只需在代码中给出适当的属性即可。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13865218
复制相关文章
相似问题
腾讯云开发者
