显示的 jQuery 日期选择器年份答案

【问题标题】：jQuery datepicker years shown显示的 jQuery 日期选择器年份
【发布时间】：2010-09-21 03:18:07
【问题描述】：

使用 jQuery 日期选择器，如何更改显示的年份范围？在 jQuery UI 网站上，它说默认值为“显示当前年份前后 10 年”。我想用它来选择生日，而在今天之前的 10 年并不好。这可以用 jQuery datepicker 完成还是我必须使用不同的解决方案？

日期选择器演示链接：http://jqueryui.com/demos/datepicker/#dropdown-month-year

【问题讨论】：

标签： jquery datepicker

【解决方案1】：

如果您稍微向下看一下演示页面，您会看到“限制日期选择器”部分。使用下拉菜单指定“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 或其他东西）。

【讨论】：

谢谢！我看过那里，但一定错过了。效果很好。
我正在尝试使用它，但它仅显示从当前选定日期起 -20 年...？
你也可以用c代替+0，所以yearRange: "-20:c",

【解决方案2】：

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

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

【讨论】：

可能应该在 yearRange 左右引用。
这正是我要找的……谢谢先生……changeMonth，changeYear
这是一个完美的答案！谢谢！

【解决方案3】：

没有人提出的是，您还可以设置硬编码的日期范围：

例如：

yearRange: "1901:2012"

虽然建议不要这样做，但它是一个完全有效的选项（如果您在目录中合法地寻找特定年份，例如“1963:1984”，则很有用）。

【讨论】：

【解决方案4】：

完美的出生日期字段（以及我使用的）类似于 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"
});

希望未来的谷歌人会发现这很有用:)。

【讨论】：

最年长的人是 Jeanne Calmant，122 岁。我会把它设置为 140 以保持一些利润:)
@ChristopheRoussy 你说得对，我想我是在想最年长的人……他现在 116 岁 :)。答案已编辑。

【解决方案5】：

除了@Shog9 发布的内容外，您还可以在 beforeShowDay: 回调函数中单独限制日期。

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

"$(".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, '']; 
}

【讨论】：

这里的语法高亮有什么问题？ NationalDays 是怎么回事？我不明白你的代码对不起，如果你能澄清一下？

【解决方案6】：

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

yearRange: '1950:2013', // 指定硬编码的年份范围或者这样

yearRange: "-100:+0", // 过去一百年

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

【讨论】：

【解决方案7】：

au、nz、ie 等是显示国庆日的国家/地区代码（澳大利亚、新西兰、爱尔兰...）。从代码中可以看出，这些值与 '_day' 组合并传递回以作为 CSS 样式应用于当天。对应的样式如下图所示，将当天的文字移开，并用国旗图像代替。

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

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

【讨论】：

【解决方案8】：

我认为这也可以工作

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

【讨论】：