jQuery UI 实例 - 日期选择器（Datepicker）

介绍

Datepicker 是 jQuery UI 中用来选择日期的组件。它允许用户选择日期，支持各种语言和日期格式。

使用方法

Datepicker 插件需要同时引入 jQuery 和 jQuery UI，可以从官网下载最新版的 jQuery UI，也可以在网上搜索其他的下载地址。在 HTML 中引入以下代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="jquery-ui.css">
  <script src="jquery.js"></script>
  <script src="jquery-ui.js"></script>
  <script>
    $(function() {
      $( "#datepicker" ).datepicker();
    });
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>

在上面的代码中，我们使用了 jQuery 的 ready 方法和 Datepicker 插件的初始化方法。当文档加载完成时，Datepicker 会自动初始化。在 HTML 中创建一个输入框，并设置其 id 为 datepicker，就可以在网页上看到日期选择器了。

选项设置

Datepicker 提供许多选项，可以自定义日期选择器的外观和行为。以下是一些常用的选项：

dateFormat：指定日期的格式。默认值是 mm/dd/yy。其他常用格式有 yy-mm-dd 和 d M, yy。
altField：指定一个隐藏的输入框，用来保存日期的值。
altFormat：指定隐藏输入框的日期格式。
changeMonth：允许用户选择月份。
changeYear：允许用户选择年份。
minDate：指定可以选择的最小日期。
maxDate：指定可以选择的最大日期。

在初始化代码中使用选项设置的方法如下：

$(function() {
    $( "#datepicker" ).datepicker({
        dateFormat: 'yy-mm-dd',
        altField: "#alt-date",
        altFormat: 'yy, MM d',
        changeMonth: true,
        changeYear: true,
        minDate: new Date(2021, 0, 1),
        maxDate: new Date(2022, 11, 31)
    });
});

事件监听

Datepicker 提供了多个事件可以监听，以便根据用户行为进行相应的处理。以下是一些常用的事件：

onSelect：当用户选择日期时触发此事件。
onClose：当日期选择器关闭时触发此事件。
beforeShowDay：可以在日期选择器上设置自定义日期的样式或禁用某些日期。

监听事件的方法如下：

$(function() {
    $( "#datepicker" ).datepicker({
        dateFormat: 'yy-mm-dd',
        onSelect: function(date) {
            console.log("用户选择了日期：" + date);
        },
        beforeShowDay: function(date) {
            // 如果日期是周末，就禁用
            if (date.getDay() === 0 || date.getDay() === 6) {
                return [false];
            } else {
                return [true];
            }
        }
    });
});

总结

Datepicker 是一个非常方便的日期选择器插件，可以帮助用户快速选择日期。我们可以使用其各种选项和事件来进行自定义设置，满足各种需求。

jQuery UI 实例 - 旋转器（Spinner） jQuery UI 实例 - 显示（Show）