移动jQuery:有限制的日期选择器(周末，时间范围)

jQuery 日期选择器限制（周末和时间范围）解决方案

基础概念

jQuery 日期选择器是基于 jQuery UI 的 Datepicker 组件，它允许用户通过交互式日历选择日期。在实际应用中，我们经常需要对可选日期进行限制，比如禁用周末或限制在特定时间范围内。

实现方法

1. 禁用周末日期

$(function() {
  $("#datepicker").datepicker({
    beforeShowDay: function(date) {
      var day = date.getDay();
      return [(day != 0 && day != 6), ''];
    }
  });
});

2. 限制日期范围

$(function() {
  $("#datepicker").datepicker({
    minDate: new Date(2023, 0, 1), // 最小日期：2023年1月1日
    maxDate: new Date(2023, 11, 31) // 最大日期：2023年12月31日
  });
});

3. 结合禁用周末和日期范围

$(function() {
  $("#datepicker").datepicker({
    minDate: new Date(2023, 0, 1),
    maxDate: new Date(2023, 11, 31),
    beforeShowDay: function(date) {
      var day = date.getDay();
      return [(day != 0 && day != 6), ''];
    }
  });
});

4. 动态日期限制

$(function() {
  $("#datepicker").datepicker({
    beforeShowDay: function(date) {
      // 禁用周末
      var day = date.getDay();
      var isWeekend = (day == 0 || day == 6);
      
      // 示例：禁用特定日期（如节假日）
      var formattedDate = $.datepicker.formatDate('yy-mm-dd', date);
      var disabledDates = ['2023-10-01', '2023-10-02', '2023-10-03'];
      
      return [
        !isWeekend && disabledDates.indexOf(formattedDate) == -1,
        ''
      ];
    }
  });
});

高级应用

1. 使用数组定义禁用日期

var disabledDates = ["2023-10-01", "2023-10-02", "2023-10-03"];

$(function() {
  $("#datepicker").datepicker({
    dateFormat: "yy-mm-dd",
    beforeShowDay: function(date) {
      var day = date.getDay();
      var formattedDate = $.datepicker.formatDate('yy-mm-dd', date);
      
      return [
        (day != 0 && day != 6) && 
        (disabledDates.indexOf(formattedDate) == -1),
        ""
      ];
    }
  });
});

2. 基于业务规则的日期限制

$(function() {
  $("#datepicker").datepicker({
    beforeShowDay: function(date) {
      // 业务规则示例：每月15日后不可选
      var dayOfMonth = date.getDate();
      var isAfter15th = dayOfMonth > 15;
      
      return [!isAfter15th, ""];
    }
  });
});

常见问题及解决方案

1. 日期格式问题

确保日期格式一致，使用 $.datepicker.formatDate() 格式化日期进行比较。

2. 性能问题

当禁用大量日期时，beforeShowDay 回调可能会影响性能。可以考虑：

优化禁用日期的存储结构（如使用对象而非数组）
减少不必要的日期计算

3. 时区问题

处理日期时要注意时区问题，建议使用UTC时间或明确指定时区。

完整示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery Datepicker 限制示例</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $(function() {
    // 定义禁用日期数组
    var disabledDates = ["2023-10-01", "2023-10-02", "2023-10-03"];
    
    $("#datepicker").datepicker({
      dateFormat: "yy-mm-dd",
      minDate: new Date(2023, 0, 1),
      maxDate: new Date(2023, 11, 31),
      beforeShowDay: function(date) {
        // 禁用周末
        var day = date.getDay();
        var isWeekend = (day == 0 || day == 6);
        
        // 检查是否在禁用日期列表中
        var formattedDate = $.datepicker.formatDate('yy-mm-dd', date);
        var isDisabledDate = disabledDates.indexOf(formattedDate) != -1;
        
        // 返回结果：是否可选，CSS类，提示文本
        return [
          !isWeekend && !isDisabledDate,
          "",
          isWeekend ? "周末不可选" : (isDisabledDate ? "该日期不可选" : "")
        ];
      },
      onSelect: function(dateText) {
        console.log("选择的日期是: " + dateText);
      }
    });
  });
  </script>
</head>
<body>
  <p>日期: <input type="text" id="datepicker"></p>
</body>
</html>

这个示例展示了如何结合禁用周末、特定日期和日期范围限制，同时提供了选择日期的回调函数。