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

Bootstrap Datepicker单日历日期范围选择实现教程

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

概述

bootstrap datepicker是一个流行的日期选择组件，通常用于网页表单。默认情况下，当需要选择日期范围时，我们可能会倾向于使用input-daterange类，但这通常会导致显示两个独立的日历，一个用于开始日期，一个用于结束日期。然而，在某些场景下，我们希望在一个日历中完成日期范围的选择，并直观地高亮显示选定的范围。本教程将指导您如何实现这一目标。

核心思路

实现单日历日期范围选择的关键在于以下几点：

使用单个输入框： 而非两个独立的输入框。
启用multidate选项： 允许用户在一个日历中选择多个日期。
限制选择数量： 通过事件监听确保用户最多只能选择两个日期（起始和结束）。
高亮显示范围： 利用beforeShowDay回调函数，为选定日期之间的日期添加自定义样式。

准备工作

首先，确保您的项目中已引入jQuery和Bootstrap Datepicker的CSS及JS文件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Datepicker单日历日期范围</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 !important; /* 使用!important确保覆盖默认样式 */
            color: #fff;
        }
        body {
            padding: 20px;
        }
        .input-group {
            width: 300px; /* 示例宽度 */
        }
    </style>
</head>
<body>

    <h3>单日历日期范围选择器</h3>
    <div class="input-group">
        <input type="text" id="dateRangePicker" 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>
    <script>
        // JavaScript代码将在此处添加
    </script>
</body>
</html>

登录后复制

实现步骤

1. 初始化Datepicker

首先，我们需要在单个输入框上初始化Datepicker，并启用multidate选项。

$(document).ready(function() {
    $('#dateRangePicker').datepicker({
        startView: 0,           // 初始视图为日视图
        minViewMode: 0,         // 最小视图模式为日视图
        maxViewMode: 2,         // 最大视图模式为年视图
        multidate: true,        // 允许选择多个日期
        multidateSeparator: " - ", // 多个日期之间的分隔符
        autoClose: true,        // 选择日期后自动关闭
        todayHighlight: true,   // 高亮今天
        format: 'yyyy-mm-dd'    // 日期格式
    });
});

登录后复制

2. 处理日期选择逻辑

当用户选择日期时，我们需要监听changeDate事件。在这个事件中，我们将实现以下逻辑：

获取所有已选择的日期。
如果选择的日期超过两个，则只保留最新的两个日期。
对这两个日期进行排序，确保起始日期在前，结束日期在后。
更新Datepicker的内部状态，以反映正确的日期选择。

$(document).ready(function() {
    $('#dateRangePicker').datepicker({
        // ... (其他配置)
    }).on("changeDate", function(event) {
        var selectedDates = event.dates;
        var $elem = $(this);

        // 避免无限循环，如果当前选择的日期与已存储的相同则退出
        if ($elem.data("selecteddates") === selectedDates.map(d => d.getTime()).join(",")) {
            return;
        }

        // 如果选择的日期超过两个，则移除最早的日期，只保留最新的两个
        if (selectedDates.length > 2) {
            selectedDates = selectedDates.splice(selectedDates.length - 1); // 移除第一个，保留后两个
        }

        // 确保日期是按时间顺序排列的
        selectedDates.sort(function(a, b) {
            return new Date(a).getTime() - new Date(b).getTime();
        });

        // 存储当前选中的日期，用于防止无限循环
        $elem.data("selecteddates", selectedDates.map(d => d.getTime()).join(","));
        // 更新Datepicker的内部日期，确保显示和逻辑一致
        $elem.datepicker('setDates', selectedDates);
    });
});

登录后复制

注意事项：

event.dates返回的是一个Date对象数组。
$elem.data("selecteddates")用于存储一个日期的字符串表示，以便在changeDate事件中判断日期是否真的发生了变化，避免setDates导致的无限递归。这里使用getTime()来获取时间戳进行比较，更精确。
splice(selectedDates.length - 1)操作实际上是移除数组的第一个元素，如果selectedDates有3个元素，它会移除索引为0的元素，留下索引为1和2的元素。

3. 高亮显示日期范围

为了让用户直观地看到选择的日期范围，我们需要在日历中高亮显示起始日期和结束日期之间的所有日期。这可以通过beforeShowDay回调函数实现。

UP简历

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

128

查看详情

beforeShowDay函数会在渲染每个日历日期之前被调用，它接收一个Date对象作为参数，并期望返回一个字符串（CSS类名）、布尔值（禁用日期）或一个包含这些的数组。

$(document).ready(function() {
    // ... (初始化和changeDate事件)

    $('#dateRangePicker').datepicker({
        // ... (其他配置)
        beforeShowDay: highlightRange // 指定高亮函数
    }).on("changeDate", function(event) {
        // ... (changeDate事件处理)
    });

    // 高亮日期范围的函数
    function highlightRange(date) {
        var selectedDates = $('#dateRangePicker').datepicker('getDates');

        // 如果已经选择了两个日期，并且当前日期在两个日期之间，则添加高亮类
        if (selectedDates.length === 2 && date >= selectedDates[0] && date <= selectedDates[1]) {
            return 'highlighted'; // 返回自定义CSS类名
        }
        return ''; // 否则不添加任何特殊类
    }
});

登录后复制

4. 添加CSS样式

最后，我们需要为highlighted类定义样式，使其在视觉上突出显示。

.highlighted {
    background-color: #99ccff !important; /* 示例蓝色 */
    color: #fff !important; /* 确保文字颜色可见 */
    border-radius: 0; /* 根据需要调整圆角 */
}
/* 也可以为选中的起始/结束日期添加不同的样式，以作区分 */
.datepicker table tr td.active.highlighted {
    background-color: #007bff !important; /* 选中日期的背景色 */
}

登录后复制

完整示例代码

将以上所有代码片段组合起来，形成一个完整的HTML文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Datepicker单日历日期范围</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 !important; /* 使用!important确保覆盖默认样式 */
            color: #fff !important;
            border-radius: 0; /* 确保高亮区域是矩形 */
        }
        /* 确保选中的起始/结束日期也有良好的视觉效果 */
        .datepicker table tr td.active.highlighted,
        .datepicker table tr td.active:hover.highlighted {
            background-color: #007bff !important; /* 选中日期（起始/结束）的背景色 */
            color: #fff !important;
        }
        body {
            padding: 20px;
        }
        .input-group {
            width: 300px; /* 示例宽度 */
        }
    </style>
</head>
<body>

    <h3>单日历日期范围选择器</h3>
    <div class="input-group">
        <input type="text" id="dateRangePicker" 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>
    <script>
        $(document).ready(function() {
            $('#dateRangePicker').datepicker({
                startView: 0,           // 初始视图为日视图
                minViewMode: 0,         // 最小视图模式为日视图
                maxViewMode: 2,         // 最大视图模式为年视图
                multidate: true,        // 允许选择多个日期
                multidateSeparator: " - ", // 多个日期之间的分隔符
                autoClose: true,        // 选择日期后自动关闭
                todayHighlight: true,   // 高亮今天
                format: 'yyyy-mm-dd',   // 日期格式
                beforeShowDay: highlightRange // 指定高亮函数
            }).on("changeDate", function(event) {
                var selectedDates = event.dates;
                var $elem = $(this);

                // 避免无限循环，如果当前选择的日期与已存储的相同则退出
                // 使用map和join来创建日期的唯一字符串表示
                var currentSelectedDatesStr = selectedDates.map(d => d.getTime()).join(",");
                if ($elem.data("selecteddates") === currentSelectedDatesStr) {
                    return;
                }

                // 如果选择的日期超过两个，则移除最早的日期，只保留最新的两个
                if (selectedDates.length > 2) {
                    selectedDates = selectedDates.slice(selectedDates.length - 2); // 保留最后两个
                }

                // 确保日期是按时间顺序排列的
                selectedDates.sort(function(a, b) {
                    return a.getTime() - b.getTime();
                });

                // 存储当前选中的日期，用于防止无限循环
                $elem.data("selecteddates", selectedDates.map(d => d.getTime()).join(","));
                // 更新Datepicker的内部日期，确保显示和逻辑一致
                $elem.datepicker('setDates', selectedDates);
            });

            // 高亮日期范围的函数
            function highlightRange(date) {
                var selectedDates = $('#dateRangePicker').datepicker('getDates');

                // 如果已经选择了两个日期，并且当前日期在两个日期之间，则添加高亮类
                if (selectedDates.length === 2 && date >= selectedDates[0] && date <= selectedDates[1]) {
                    return 'highlighted'; // 返回自定义CSS类名
                }
                return ''; // 否则不添加任何特殊类
            }
        });
    </script>
</body>
</html>

登录后复制

总结

通过上述步骤，我们成功地将Bootstrap Datepicker配置为一个单日历的日期范围选择器。这种方法利用了multidate功能，并通过自定义JavaScript逻辑和CSS样式，提供了直观的用户体验。这种实现方式不仅节省了屏幕空间，也使得日期范围的选择过程更加流畅和统一。在实际项目中，您可以根据需要进一步定制样式和行为，例如添加日期验证、限制可选日期范围等。

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