显示 jQuery 日期选择器年份
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/269545/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery datepicker years shown
提问by John Boker
With the jQuery datepicker, how does one change the year range that is displayed? On the jQuery UI site it says the default is "10 years before and after the current year are shown". I want to use this for a birthday selection and 10 years before today is no good. Can this be done with the jQuery datepicker or will I have to use a different solution?
使用 jQuery 日期选择器，如何更改显示的年份范围？在 jQuery UI 站点上，它说默认值是“显示当前年份之前和之后 10 年”。我想用它来选择生日，10 年前的今天是不行的。这可以用 jQuery datepicker 来完成还是我必须使用不同的解决方案？
link to datepicker demo: http://jqueryui.com/demos/datepicker/#dropdown-month-year
链接到日期选择器演示：http: //jqueryui.com/demos/datepicker/#dropdown-month-year
回答by Shog9
If you look down the demo page a bit, you'll see a "Restricting Datepicker" section. Use the dropdown to specify the "Year dropdown shows last 20 years" demo , and hit view source:
如果您稍微向下看一下演示页面，您会看到“限制日期选择器”部分。使用下拉菜单指定“ 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
});
You'll want to do the same (obviously changing -20to -100or something).
你会想这样做（显然改变-20到-100什么的）。
回答by Plippie
Why not show the year or month selection boxes?
为什么不显示年或月选择框？
$( ".datefield" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange:'-90:+0'
});
回答by Warren Sergent
what no one else has put is that you can also set hard-coded date ranges:
没有其他人提出的是，您还可以设置硬编码的日期范围：
for example:
例如：
yearRange: "1901:2012"
whilst it may be advisable to not do this, it is however, an option that is perfectly valid (and useful if you are legitimately looking for say a specific year in a catalogue - such as "1963:1984" ).
虽然不这样做可能是明智的，但是，这是一个完全有效的选项（如果您正在合法地寻找目录中的特定年份，例如 "1963:1984" ，则很有用）。
回答by Maverick
Perfect for date of birth fields (and what I use) is similar to what Shog9 said, although I'm going to give a more specific DOB example:
完美的出生日期字段（以及我使用的）类似于 Shog9 所说的，尽管我将给出一个更具体的 DOB 示例：
$(".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"
});
Hope future googlers find this useful :).
希望未来的谷歌员工发现这很有用:)。
回答by JamesSugrue
Adding to what @Shog9 posted, you can also restrict dates individually in the beforeShowDay: callback function.
除了@Shog9 发布的内容之外，您还可以在 beforeShowDay: 回调函数中单独限制日期。
You supply a function that takes a date and returns a boolean array:
您提供一个函数，该函数接受一个日期并返回一个布尔数组：
"$(".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, ''];
}
回答by Manish
$("#DateOfBirth").datepicker({
yearRange: "-100:+0",
changeMonth: true,
changeYear: true,
});
yearRange: '1950:2013', // specifying a hard coded year range or this way
yearRange: '1950:2013', // 指定一个硬编码的年份范围或这样
yearRange: "-100:+0", // last hundred years
yearRange: "-100:+0", // 过去百年
It will help to show drop down for year and month selection.
这将有助于显示年份和月份选择的下拉菜单。
回答by Manish
au, nz, ie, etc. are the country codes for the countries whose national days are being displayed (Australia, New Zealand, Ireland, ...). As seen in the code, these values are combined with '_day' and passed back to be applied to that day as a CSS style. The corresponding styles are of the form show below, which moves the text for that day out of the way and replaces it with an image of the country's flag.
au、nz、ie 等是显示国庆日的国家（澳大利亚、新西兰、爱尔兰等）的国家代码。如代码所示，这些值与“_day”组合并传回以作为 CSS 样式应用于当天。相应的样式如下所示，它将当天的文本移开，并用国家国旗的图像替换它。
.au_day {
text-indent: -9999px;
background: #eee url(au.gif) no-repeat center;
}
The 'false' value that is passed back with the new style indicates that these days may not be selected.
使用新样式传回的“false”值表示可能未选择这些天。
回答by Himansz
i think this may work as well
我认为这也可能有效
$(function () {
$(".DatepickerInputdob").datepicker({
dateFormat: "d M yy",
changeMonth: true,
changeYear: true,
yearRange: '1900:+0',
defaultDate: '01 JAN 1900'
});
