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

作者 2025年8月31日 11

本教程详细介绍了如何利用 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 文件。

<!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 逻辑来控制选择行为和视觉反馈。

Hello! 欢迎来到悠悠畅享网！