jQuery UI Datepicker yearRange 选项

介绍

yearRange 选项是 jQuery UI Datepicker 控件的一个可选参数，它允许程序员设置一个范围，指定哪些年份应该在日期选择器的年份菜单中显示。

语法

$( ".selector" ).datepicker({
  yearRange: "开始年份:结束年份"
});

其中 开始年份 和 结束年份 都是四位数，用冒号 : 分隔，例如 "2000:2030"，代表只显示 2000 到 2030 年之间的年份。

此外，yearRange 选项还有其他常用的写法：

• "all"：表示显示所有年份，相当于复选框 "选择年份" 未选中的效果。
• "-n:+m"：表示显示当前年份前 n 年至后 m 年的所有年份，如 -5:+5 代表显示当前年份前 5 年和后 5 年的所有年份。
• "+n:-m"：表示显示当前年份后 n 年至前 m 年的所有年份，如 +5:-5 代表显示当前年份后 5 年和前 5 年的所有年份。

示例

$( "#datepicker" ).datepicker({
  yearRange: "2000:2030"
});

上面代码指定了 #datepicker 元素的日期选择器，只显示年份范围在 2000 到 2030 年之间的年份。

$( "#datepicker" ).datepicker({
  yearRange: "-5:+5"
});

上面代码指定了 #datepicker 元素的日期选择器，只显示当前年份前 5 年和后 5 年的所有年份。

$( "#datepicker" ).datepicker({
  yearRange: "all"
});

上面代码指定了 #datepicker 元素的日期选择器，显示所有年份。

注意事项

yearRange 选项会影响日期选择器的年份菜单，但只有在弹出菜单时才会生效，如果用户手动输入一个年份，不在指定的范围内，日期选择器仍然会接受这个年份的输入。

另外，在使用双位数年份时，yearRange 选项只对输入的第一个数有效，例如 "95:99" 只会解析成 1995 到 1999 年之间的年份范围，而不是 2095 到 2099 年。建议使用四位数年份来避免这种问题。