Bootstrap Datepicker 单日历日期范围选择实现指南-js教程-PHP中文网

Bootstrap Datepicker 单日历日期范围选择实现指南

花韻仙語

发布： 2025-08-30 18:56:35

原创

560人浏览过

Bootstrap Datepicker 单日历日期范围选择实现指南

本教程详细介绍了如何利用 Bootstrap Datepicker 实现单日历的日期范围选择功能。通过配置 multidate 选项并结合自定义的 changeDate 事件处理逻辑及 beforeShowDay 函数，用户可以在一个日历视图中直观地选择并高亮显示起始和结束日期，从而实现简洁高效的日期范围选择体验。

1. 背景与挑战

bootstrap datepicker 是一个广受欢迎的日期选择插件，常用于表单中的日期输入。默认情况下，如果需要实现日期范围选择，通常会使用 input-daterange 结构，它会将两个独立的输入框关联起来，并可能弹出两个独立的日历视图，分别用于选择开始日期和结束日期。然而，在某些场景下，用户可能更倾向于在一个日历视图中完成日期范围的选择，即点击第一个日期作为开始，点击第二个日期作为结束，并高亮显示两者之间的所有日期。这需要对 datepicker 的默认行为进行一些定制。

2. 实现原理

要实现单日历日期范围选择，核心思路是利用 Bootstrap Datepicker 的 multidate（多选日期）功能，并在此基础上添加自定义逻辑来限制选择的日期数量（最多两个），处理日期的排序，以及通过 beforeShowDay 回调函数实现日期范围的高亮显示。

具体步骤如下：

使用单个输入框： 不再使用 input-daterange 结构，而是绑定一个标准的 <input type="text"> 元素。
启用多选： 将 multidate 选项设置为 true，允许用户选择多个日期。
定义多选分隔符： 设置 multidateSeparator，它将用于在输入框中显示选定的多个日期，例如 "YYYY-MM-DD - YYYY-MM-DD"。
限制选择数量： 在 changeDate 事件中，检查当前选定的日期数量，如果超过两个，则只保留最后两个日期。
排序日期： 确保选定的两个日期始终按时间顺序排列（开始日期在前，结束日期在后）。
高亮显示范围： 使用 beforeShowDay 回调函数，根据已选择的开始和结束日期，为范围内的所有日期添加特定的 CSS 类，从而实现视觉上的高亮效果。

3. 代码实现

3.1 引入必要的库和样式

首先，确保你的 HTML 页面中已经引入了 jQuery 和 Bootstrap Datepicker 的 CSS 和 JavaScript 文件。

UP简历

基于AI技术的免费在线简历制作工具

128

查看详情

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单日历日期范围选择</title>
    <!-- Bootstrap Datepicker CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
    <style>
        /* 定义高亮样式 */
        .highlighted {
            background-color: #99ccff; /* 浅蓝色背景 */
            border-radius: 3px; /* 轻微圆角 */
        }
    </style>
</head>
<body>

    <div style="margin: 50px;">
        <h3>选择日期范围</h3>
        <!-- 单个日期输入框 -->
        <input type="text" id="date" class="form-control" placeholder="请选择日期范围">
    </div>

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- Bootstrap Datepicker JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
    <!-- Datepicker 汉化文件 (可选) -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.zh-CN.min.js"></script> -->

    <script>
        // JavaScript 代码将在这里添加
    </script>
</body>
</html>

登录后复制

3.2 JavaScript 配置与逻辑

接下来，添加用于初始化 Datepicker 并处理日期选择逻辑的 JavaScript 代码。

$(document).ready(function() {
    // 初始化 Datepicker
    $('#date').datepicker({
        startView: 0, // 初始视图模式，0 = 月视图
        minViewMode: 0, // 最小视图模式，0 = 日
        maxViewMode: 2, // 最大视图模式，2 = 年
        multidate: true, // 启用多选功能
        multidateSeparator: " - ", // 多选日期在输入框中的分隔符
        autoClose: true, // 选择日期后自动关闭日历
        // beforeShowDay 回调函数，用于自定义日期的样式
        beforeShowDay: highlightRange,
        // language: 'zh-CN' // 如果引入了汉化文件，可以设置语言
    }).on("changeDate", function(event) {
        // 当日期改变时触发的事件
        var dates = event.dates; // 获取当前所有选定的日期数组
        var elem = $('#date');

        // 避免重复处理，如果选定日期没有变化则直接返回
        if (elem.data("selecteddates") === dates.join(",")) {
            return;
        }

        // 如果选定的日期超过两个，则只保留最后两个
        if (dates.length > 2) {
            dates = dates.splice(dates.length - 1); // 移除除了最后一个之外的所有日期
        }

        // 对选定的日期进行排序，确保开始日期在前，结束日期在后
        dates.sort(function(a, b) {
            return new Date(a).getTime() - new Date(b).getTime();
        });

        // 将处理后的日期重新设置回 Datepicker，并更新 input 框显示
        // 同时将当前选定日期存储在 data 属性中，用于下次比较
        elem.data("selecteddates", dates.join(",")).datepicker('setDates', dates);
    });

    // beforeShowDay 回调函数实现日期范围高亮
    function highlightRange(date) {
        var selectedDates = $('#date').datepicker('getDates'); // 获取当前 Datepicker 中选定的日期
        // 如果已经选择了两个日期，并且当前日期在选定范围之内，则添加 'highlighted' 类
        if (selectedDates.length === 2 && date >= selectedDates[0] && date <= selectedDates[1]) {
            return {
                classes: 'highlighted'
            };
        }
        // 否则不添加任何特殊类
        return {};
    }
});

登录后复制

4. 注意事项

库版本： 确保使用的 jQuery 和 Bootstrap Datepicker 版本兼容。本示例使用的是 jQuery 2.1.1 和 Bootstrap Datepicker 1.8.0。
CSS 样式： highlighted 类是自定义的，你可以根据自己的设计需求调整其样式。
用户体验： 此方案通过点击两次来选择范围，第一次点击选择开始日期，第二次点击选择结束日期。如果用户第三次点击，则会清空前两个日期，重新开始选择。这种行为需要用户习惯。
日期格式： Datepicker 的日期格式可以通过 format 选项进行配置，例如 format: 'yyyy-mm-dd'。本示例未显式设置，将使用 Datepicker 的默认格式。
清除选择： 如果需要提供一个清除按钮来清空已选的日期范围，可以调用 $('#date').datepicker('clearDates'); 方法。

5. 总结

通过上述方法，我们成功地将 Bootstrap Datepicker 从默认的单日选择或双日历范围选择模式，改造为在一个日历视图中实现日期范围选择的功能。这种方式不仅节省了屏幕空间，也为用户提供了更直观、更一体化的日期范围选择体验。核心在于灵活运用 multidate、multidateSeparator、changeDate 事件以及 beforeShowDay 回调函数，通过 JavaScript 逻辑来控制选择行为和视觉反馈。

以上就是Bootstrap Datepicker 单日历日期范围选择实现指南的详细内容，更多请关注php中文网其它相关文章！