jquery ui datepicker时间范围限制

封面图 • 2026-01-14 • jQuery

在使用 jQuery UI 的日期选择器（datepicker）时，可以通过设置 `minDate` 和 `maxDate` 选项来限制用户可以选择的日期范围。此外，还可以通过 `beforeShowDay` 函数进一步自定义日期是否可用。

以下是一些常见的用法示例：

### 1. 设置最小和最大日期范围

```javascript
$(function() {
    $("#datepicker").datepicker({
        minDate: "-1M", // 最小日期为当前日期的一个月前
        maxDate: "+1M"  // 最大日期为当前日期的一个月后
    });
});
```

在这个例子中：
- `minDate: "-1M"` 表示用户只能选择当前日期之前一个月内的日期。
- `maxDate: "+1M"` 表示用户只能选择当前日期之后一个月内的日期。

### 2. 使用具体日期设置范围

你也可以直接使用具体的日期来设置最小和最大日期：

```javascript
$(function() {
    $("#datepicker").datepicker({
        minDate: "01/01/2023", // 最小日期为 2023 年 1 月 1 日
        maxDate: "12/31/2023"  // 最大日期为 2023 年 12 月 31 日
    });
});
```

### 3. 禁用特定日期范围

如果你需要禁用某个日期范围内的所有日期，可以使用 `beforeShowDay` 函数：

```javascript
$(function() {
    $("#datepicker").datepicker({
        beforeShowDay: function(date) {
            var startDate = new Date(2023, 0, 15); // 开始禁用日期
            var endDate = new Date(2023, 0, 30);   // 结束禁用日期
            return [date >= startDate && date <= endDate ? false : true];
        }
    });
});
```

在这个例子中，2023 年 1 月 15 日到 2023 年 1 月 30 日之间的所有日期都会被禁用。

### 4. 禁用周末

如果你想禁用周末（周六和周日），可以使用 `beforeShowDay` 来实现：

```javascript
$(function() {
    $("#datepicker").datepicker({
        beforeShowDay: function(date) {
            var day = date.getDay();
            return [(day != 0 && day != 6), ""]; // 0 是星期日，6 是星期六
        }
    });
});
```

在这个例子中，所有的周末（星期六和星期日）都会被禁用。

### 5. 禁用特定日期

如果你想禁用某些特定的日期，可以使用 `beforeShowDay` 并结合一个日期数组：

```javascript
$(function() {
    var disabledDates = ["2023-01-15", "2023-01-20", "2023-01-25"];

function isDateDisabled(date) {
        var dateString = $.datepicker.formatDate("yy-mm-dd", date);
        return $.inArray(dateString, disabledDates) != -1;
    }

$("#datepicker").datepicker({
        beforeShowDay: function(date) {
            return [!isDateDisabled(date)];
        }
    });
});
```

在这个例子中，2023 年 1 月 15 日、2023 年 1 月 20 日和 2023 年 1 月 25 日会被禁用。

### 总结

通过 `minDate` 和 `maxDate` 可以轻松设置日期范围，而通过 `beforeShowDay` 可以实现更复杂的日期限制逻辑。你可以根据具体需求组合使用这些选项来满足你的业务逻辑。