jQuery UI Datepicker changeYear 选项介绍

jQuery UI Datepicker 是一个适用于jQuery的日历控件插件，它让网页上的日期选择更加方便和美观。changeYear 是 Datepicker 配置项之一，这个选项可以让用户在日期选择框中选择年份。

使用方法

可以通过设置 changeYear 的值来开启或关闭 changeYear 选项，如下：

$( ".datepicker" ).datepicker({
  changeYear: true
});

当 changeYear 的值为 false 时，将不会显示调整年份的下拉列表。

配置项说明

changeYear

• 类型：Boolean
• 默认值：false
• 说明：设置为true时，将在日期选择框中添加一个下拉列表，用于调整年份。

yearRange

• 类型：String, Array
• 默认值："c-10:c+10"
• 说明：可以设置一个字符串或者数组，用于限制下拉列表中可选年份的范围。字符串的格式为 "YYYY1:YYYY2"，其中 YYYY1 表示最小可选年份，YYYY2 表示最大可选年份，c 表示当前年份。如果使用数组，则第一个元素为最小年份，第二个元素为最大年份。

showButtonPanel

• 类型：Boolean
• 默认值：false
• 说明：设置为true时，将在日期选择框下方添加一个按钮面板，用于关闭日期选择框或者将当前日期作为选择结果。

示例代码

$( ".datepicker" ).datepicker({
  changeYear: true, // 显示可选年份列表
  yearRange: "2000:2020", // 只允许选择2000-2020年份
  showButtonPanel: true // 显示按钮面板
});

总结

使用 changeYear 选项可以让用户方便地在日期选择框中选择年份。通过配置 yearRange 选项，你可以限制下拉列表中可选年份的范围。同时可以设置 showButtonPanel 选项来添加按钮面板，让用户更方便地关闭日期选择框或者将当前日期作为选择结果。