JQuery 数据采集器显示的年份

使用 jQuery 数据采集器,如何更改显示的年份范围?在 jQueryUI 站点上,默认设置是“显示当前年份之前和之后的10年”。我想用这个作为生日的选择,10年前的今天是不好的。这是否可以通过 jQuery 数据采集器来完成,还是需要使用其他解决方案?

链接到数据采集器演示: http://jqueryui.com/demos/datepicker/#dropdown-month-year

110280 次浏览

如果您稍微向下看一下演示页面,您将看到一个“限制数据采集器”部分。使用下拉菜单指定“ Year dropdown shows last 20 years”演示,点击查看源代码:

$("#restricting").datepicker({
yearRange: "-20:+0", // this is the option you're looking for
showOn: "both",
buttonImage: "templates/images/calendar.gif",
buttonImageOnly: true
});

你会想做同样的事情(显然改变 -20-100或其他东西)。

添加到@Shog9发布的内容中,还可以在 before ShowDay: callback 函数中单独限制日期。

你提供一个函数,它接受一个日期并返回一个布尔数组:

"$(".selector").datepicker({ beforeShowDay: nationalDays})
natDays = [[1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'], [4, 27, 'za'],
[5, 25, 'ar'], [6, 6, 'se'], [7, 4, 'us'], [8, 17, 'id'], [9, 7,
'br'], [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']];
function nationalDays(date) {
for (i = 0; i < natDays.length; i++) {
if (date.getMonth() == natDays[i][0] - 1 && date.getDate() ==
natDays[i][1]) {
return [false, natDays[i][2] + '_day'];
}
}
return [true, ''];
}

Au、 nz (等)是其国庆日所在国家的国家代码(澳大利亚、新西兰、爱尔兰、 ...)。正如在代码中看到的,这些值与“ _ day”组合在一起,并传递回来以 CSS 样式应用到那一天。相应的样式如下所示,它将当天的文本移开,代之以国旗的图像。

.au_day {
text-indent: -9999px;
background: #eee url(au.gif) no-repeat center;
}

用新样式传递回来的‘ false’值表示这些天可能不会被选中。

为什么不显示年或月选择框?

$( ".datefield" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange:'-90:+0'
});

其他人没有提到的是,您还可以设置硬编码的日期范围:

例如:

yearRange: "1901:2012"

尽管不这样做可能是明智的,但这是一个完全有效的选择(如果你正在合法地在目录中寻找特定的年份,比如“1963:1984”,这种选择是有用的)。

完美的出生日期字段(和我使用的)类似于 Shog9所说的,尽管我将给出一个更具体的出生日期的例子:

$(".datePickerDOB").datepicker({
yearRange: "-122:-18", //18 years or older up to 122yo (oldest person ever, can be sensibly set to something much smaller in most cases)
maxDate: "-18Y", //Will only allow the selection of dates more than 18 years ago, useful if you need to restrict this
minDate: "-122Y"
});

希望未来的谷歌员工能从中受益:)。

 $("#DateOfBirth").datepicker({
yearRange: "-100:+0",
changeMonth: true,
changeYear: true,
});

Year Range: “1950:2013”,//指定硬编码的年范围 或者这边

Year Range: “-100: + 0”,//last million years 年份范围: “-100: + 0”,//最近一百年

这将有助于显示下降的年份和月份的选择。

我觉得这样也行

$(function () {
$(".DatepickerInputdob").datepicker({
dateFormat: "d M yy",
changeMonth: true,
changeYear: true,
yearRange: '1900:+0',
defaultDate: '01 JAN 1900'
});