jQuery UI Datepicker Widget 完整参考

jQuery UI Datepicker Widget 是 jQuery UI 库中的组件，用于显示日期和时间选择器。它具有丰富的配置选项和细粒度的事件触发。

安装

在 HTML 页面中引入 jQuery、jQuery UI 和 jQuery UI Datepicker 的相关文件即可使用：

<!-- 引入 jQuery 核心库 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- 引入 jQuery UI 核心库及主题 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- 引入 jQuery UI Datepicker 相关文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

用法

Datepicker 可以通过调用插件的 .datepicker() 方法来初始化：

$( ".datepicker" ).datepicker();

这个方法会将所有 .datepicker 类名的元素转换成日历选择器。默认情况下，它在当前文本框下方显示了一个可选择的小部件。

配置选项

Datepicker 有很多配置选项，可以自定义日期选择器的行为和样式。例如：

$( ".datepicker" ).datepicker({
  dateFormat: "yy-mm-dd",
  changeMonth: true,
  changeYear: true
});

这段代码将为所有 .datepicker 元素设置日期格式为 年-月-日 并启用 changeMonth 和 changeYear 选项，以便用户可以在日历中选择月份和年份。

以下是一些常用的选项：

minDate 和 maxDate

使用户无法选择早于或晚于特定日期的日期。

$( ".datepicker" ).datepicker({
  minDate: 0, // 今天或更晚
  maxDate: "+1M" // 一个月后或更早
});

numberOfMonths

设置每个选择器显示的月份数。

$( ".datepicker" ).datepicker({
  numberOfMonths: 2
});

showButtonPanel

将“今天”和“现在”按钮添加到选择器底部，使其易于选择。

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

yearRange

设置可用的年份范围。

$( ".datepicker" ).datepicker({
  yearRange: "1900:2050"
});

详细列表请参考 官方文档。

事件

Datepicker 组件支持一些细粒度的事件触发，以响应特定的交互。

onSelect

选择日期时触发。

$( ".datepicker" ).datepicker({
  onSelect: function(dateText, instance) {
    console.log("Date selected: " + dateText);
  }
});

onChangeMonthYear

更改所选年份或月份时触发。

$( ".datepicker" ).datepicker({
  onChangeMonthYear: function(year, month, instance) {
    console.log("Year: " + year + ", Month: " + month);
  }
});

onClose

选择器关闭时触发。

$( ".datepicker" ).datepicker({
  onClose: function(dateText, instance) {
    console.log("Date selected: " + dateText);
  }
});

详细列表请参考 官方文档。

结论

在这篇文章中，我们介绍了 jQuery UI Datepicker，它是一个功能强大的日期和时间选择器。我们了解了如何安装、用法、配置选项和事件。使用 Datepicker 可以轻松地为网站或应用程序添加用户友好的日期选择界面，为你的项目提供更好的用户体验。