jquery UI Datepicker时间控件的使用方法（终结版）

jQuery UI Datepicker 时间控件的使用方法

1. 外部资源引入

使用 jQuery UI Datepicker 时间控件需要外部引入 jQuery 和 jQuery UI 样式文件。代码如下：

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

<!-- 引入 jQuery UI 样式文件 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<!-- 引入 jQuery UI 库 -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

2. HTML 结构

在 HTML 中定义一个 input 标签，同时定义 id 属性，以便在 JavaScript 中控制。

<input type="text" id="datepicker">

3. 初始化 Datepicker 控件

在 JavaScript 中，使用下面的代码对 input 标签进行初始化，使之成为 jQuery UI Datepicker 时间控件。

$(function() {
  $("#datepicker").datepicker();
});

4. 设置选项

可以通过设置选项来调整 DatePicker 控件的格式和行为。例如，可以设置日期格式、语言、显示月份和年份下拉框、最小和最大日期等等。

$("#datepicker").datepicker({
  dateFormat: "yy-mm-dd", // 设置日期格式，例如：2021-07-01
  changeMonth: true, // 显示月份下拉框
  changeYear: true,  // 显示年份下拉框
  yearRange: '1900:2050', //设置下拉框的年份范围
  minDate: new Date(1900, 0, 1), // 最小日期
  maxDate: new Date(2050, 11, 31) // 最大日期
});

5. 示例说明

示例 1：选取日期范围

可以通过设置 minDate 和 maxDate 选项来限制用户选择的日期范围。以下是一个例子：

$(function() {
  $("#start_datepicker").datepicker({
    dateFormat: "yy-mm-dd",
    maxDate: new Date(), // 最大日期为今天的日期
    onSelect: function(selectedDate) {
      // 设置结束日期选择器
      $("#end_datepicker").datepicker("option", "minDate", selectedDate);
    }
  });
  $("#end_datepicker").datepicker({
    dateFormat: "yy-mm-dd",
    maxDate: new Date(), // 最大日期为今天的日期
    onSelect: function(selectedDate) {
      // 设置开始日期选择器
      $("#start_datepicker").datepicker("option", "maxDate", selectedDate);
    }
  });
});

在这个示例中，我们设置了两个 Datepicker 控件，一个用于选取开始日期，另一个用于选取结束日期。开始日期的最大日期为今天的日期，结束日期的最大日期也是今天的日期。另外，当用户选中开始日期后，我们需要设置结束日期的最小日期为选中的开始日期，这样用户就不能选择开始日期之前的日期了；同理，当用户选中结束日期后，我们需要设置开始日期的最大日期为选中的结束日期，这样用户就不能选择结束日期之后的日期了。

示例 2：日期区间禁用

我们可以使用 beforeShowDay 方法，来动态设置哪些日期应该被禁用。可以使用如下代码来禁用 2021 年 7 月 5 日到 2021 年 7 月 10 日这个时间区间：

$(function() {
  $("#datepicker").datepicker({
    dateFormat: "yy-mm-dd",
    beforeShowDay: function(date) {
      var disabledDates = [
        [2021, 6, 5],
        [2021, 6, 6],
        [2021, 6, 7],
        [2021, 6, 8],
        [2021, 6, 9],
        [2021, 6, 10]
      ];
      var year = date.getFullYear();
      var month = date.getMonth();
      var day = date.getDate();
      for (var i = 0; i < disabledDates.length; i++) {
        if ($.inArray(disabledDates[i].toString(), $.datepicker.formatDate('yy-mm-dd', new Date(year, month, day)).toString()) != -1) {
          return [false];
        }
      }
      return [true];
    }
  });
});

在这个示例中，我们定义了一个 disabledDates 数组，里面存储了禁用的时间区间。然后在 beforeShowDay 中遍历这个数组，判断当前日期是否在禁用区间内。如果是，就返回 false，否则返回 true。最后控制器就会将那些返回 false 的日期置为灰色不可选。