bootstrap datepicker限定可选时间范围实现方法

当你需要在网页中添加一个日期选择器时，bootstrap datepicker是一个非常方便实用的选择。但是如果你希望用户只能选择一定的时间范围内的日期，该怎么做呢？下面我们就来详细讲解“bootstrap datepicker限定可选时间范围实现方法”的完整攻略。

1. 引入bootstrap datepicker插件

在使用bootstrap datepicker插件之前，我们需要先引入它的相关js和css文件。具体引入方法如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

2. 初始化datepicker插件

接着我们需要初始化datepicker插件，代码如下：

<input type="text" id="datepicker">
<script>
    $("#datepicker").flatpickr();
</script>

这个时候，我们就可以在网页中看到一个可以选择日期的输入框了。

3. 限定可选时间范围

接着我们可以通过在flatpickr初始化时传递参数来限定可选的时间范围，具体参数如下：

• minDate：最小可选时间
• maxDate：最大可选时间
• disable：禁用的日期

例如，我们想要限定可选时间为当前时间的前一个月到当前时间的后一个月，并且禁用周末的日期，可以这样写：

<input type="text" id="datepicker">
<script>
    $("#datepicker").flatpickr({
        minDate: new Date().fp_incr(-30),  // 当前时间的前一个月
        maxDate: new Date().fp_incr(30),  // 当前时间的后一个月
        disable: [{
            from: new Date().fp_incr(2),  // 从当前时间的两天后开始禁用
            to: new Date().fp_incr(9),  // 直到当前时间的9天后结束禁用
            daysOfWeek: [6, 0]  // 禁用周末的日期
        }]
    });
</script>

这样我们就可以实现了网页中一个限定可选时间范围的日期选择器。

示例1：

<div class="form-group">
    <label for="datepicker1">日期：</label>
    <input type="text" id="datepicker1" class="form-control">
</div>
<script>
    $("#datepicker1").flatpickr({
        minDate: new Date().fp_incr(-60),  // 当前时间的前两个月
        maxDate: new Date().fp_incr(60),  // 当前时间的后两个月
        disable: [{
            from: new Date().fp_incr(7),  // 从当前时间的7天后开始禁用
            to: new Date().fp_incr(14),  // 直到当前时间的14天后结束禁用
            daysOfWeek: [6, 0]  // 禁用周末的日期
        }]
    });
</script>

示例2：

<div class="form-group">
    <label for="datepicker2">日期：</label>
    <input type="text" id="datepicker2" class="form-control">
</div>
<script>
    $("#datepicker2").flatpickr({
        minDate: new Date().fp_incr(-30),  // 当前时间的前一个月
        maxDate: new Date().fp_incr(30),  // 当前时间的后一个月
        disable: [
            {from: new Date().fp_incr(-3), to: new Date().fp_incr(3)},  // 禁用当前时间的前三天到后三天
            {from: new Date(2022, 0, 1), to: new Date(2022, 0, 3)}  // 禁用2022年1月1日到1月3日
        ]
    });
</script>

以上就是“bootstrap datepicker限定可选时间范围实现方法”的完整攻略了，希望对你有所帮助。