Bootstrap单日历日期范围选择教程

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《Bootstrap日期选择器单日历范围选择教程》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

概述

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

核心思路

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

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

准备工作

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

    
    
    
    
    
    



    
单日历日期范围选择器
    

        <input type="text" id="dateRangePicker" class="form-control" placeholder="选择日期范围">
    

    
    
    
    
    

实现步骤

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回调函数实现。

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文件：

    
    
    
    
    
    



    
单日历日期范围选择器
    

        <input type="text" id="dateRangePicker" class="form-control" placeholder="选择日期范围">
    

    
    
    
    
    

总结

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

到这里，我们也就讲完了《Bootstrap单日历日期范围选择教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！