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

作者 2025年8月30日 9

本教程详细介绍了如何使用 bootstrap datepicker 实现单日历的日期范围选择功能。通过利用 multidate 选项和自定义 JavaScript 事件处理，用户可以在一个日历界面上选择起始和结束日期，并自动高亮显示所选范围，克服了默认双日历显示的限制，提供了更简洁的用户体验。

概述

bootstrap datepicker 是一个功能强大的日期选择组件，广泛应用于网页表单中。然而，当需要实现日期范围选择时，通常的 input-daterange 结构会默认显示两个独立的日历，分别用于选择开始日期和结束日期。在某些场景下，用户可能更倾向于在一个日历界面上完成日期范围的选择，这不仅能节省屏幕空间，也能提供更流畅的交互体验。本教程将指导您如何通过自定义配置和事件处理，实现这一需求。

实现原理

实现单日历日期范围选择的核心思路是：

使用单个输入框： 避免使用 input-daterange 结构，转而使用一个普通的文本输入框作为日期选择器。
启用 multidate 选项： 允许日期选择器同时选择多个日期。
自定义 changeDate 事件： 监听日期选择事件，确保只保留两个日期（起始和结束），并对它们进行排序。
利用 beforeShowDay 回调： 在日历渲染前，根据已选择的两个日期，高亮显示它们之间的所有日期。

准备工作

在开始之前，请确保您的项目中已引入以下必要的库文件：

jquery
Bootstrap Datepicker css 文件
Bootstrap Datepicker JavaScript 文件

<!-- 引入 Bootstrap Datepicker CSS --> <link href="https://cdnJS.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>  <!-- 引入 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>

html 结构

我们只需要一个简单的 input 元素作为日期选择器：

<input type="text" id="date" class="form-control">

CSS 样式

为了高亮显示选定的日期范围，我们需要添加一个自定义的 CSS 类。当日期位于选定范围内时，beforeShowDay 回调函数将为其添加此样式。

.highlighted {   background-color: #99ccff !important; /* 使用 !important 确保覆盖默认样式 */   color: #fff; }

JavaScript 实现

这是实现单日历日期范围选择的核心部分。我们将初始化 datepicker 并添加自定义逻辑。

$(document).ready(function() {   $('#date').datepicker({     startView: 0,           // 初始视图模式：0=天，1=月，2=年     minViewMode: 0,         // 最小视图模式：0=天     maxViewMode: 2,         // 最大视图模式：2=年     multidate: true,        // 允许选择多个日期     multidateSeparator: "-",// 多个日期之间的分隔符（虽然在此场景下我们只显示两个日期，但这是multidate的配置）     autoClose: true,        // 选择日期后自动关闭日历     beforeShowDay: highlightRange, // 在渲染每个日期之前调用的函数   }).on("changeDate", function(Event) {     var dates = event.dates; // 获取当前选中的所有日期数组     var elem = $('#date');      // 避免因 setDates 触发的无限循环     // 如果当前选中的日期与之前存储的日期相同，则不进行处理     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();     });      // 将排序后的日期存储在data属性中，用于防止无限循环     elem.data("selecteddates", dates.join(","));     // 更新日期选择器的内部日期，确保日历显示正确     elem.datepicker('setDates', dates);   });    /**    * beforeShowDay 回调函数，用于高亮显示日期范围    * @param {Date} date - 当前正在渲染的日期对象    * @returns {string} - 返回 'highlighted' 类名以高亮显示，否则返回空字符串    */   function highlightRange(date) {     var selectedDates = $('#date').datepicker('getDates'); // 获取当前已选中的日期数组      // 如果已选中两个日期，并且当前日期介于这两个日期之间（包括边界）     if (selectedDates.length === 2 && date >= selectedDates[0] && date <= selectedDates[1]) {       return 'highlighted'; // 返回 'highlighted' 类名     }     return ''; // 不添加任何类名   } });

代码详解

$(‘#date’).datepicker({…}) 初始化：
- multidate: true: 这是关键，它允许用户点击日历上的多个日期。
- autoClose: true: 在选择日期后自动关闭日历，提升用户体验。
- beforeShowDay: highlightRange: 指定一个回调函数，该函数在日历中的每个日期单元格渲染之前被调用。它的返回值可以是一个 CSS 类名，用于添加到该日期单元格上。
.on(“changeDate”, function(event) { … }) 事件处理：
- 当日期选择器中的日期发生变化时，此事件会被触发。
- event.dates：一个数组，包含了当前所有被选中的日期对象。
- 防止无限循环： elem.data(“selecteddates”) 用于存储当前已处理的日期字符串，与 event.dates.join(“,”) 进行比较，避免在 datepicker(‘setDates’, dates) 再次触发 changeDate 时进入死循环。
- 限制日期数量： if (dates.length > 2) dates = dates.splice(dates.length – 1); 确保 dates 数组中最多只有两个日期。当用户选择第三个日期时，最旧的日期会被移除，保留最新的两个。
- 日期排序： dates.sort(…) 确保数组中的第一个日期是起始日期，第二个是结束日期，这对于 highlightRange 函数至关重要。
- elem.datepicker(‘setDates’, dates)： 更新日期选择器内部的选中日期状态。这会重新渲染日历，并触发 beforeShowDay 回调。
highlightRange(date) 函数：
- 此函数接收一个 Date 对象作为参数，代表当前正在渲染的日历日期。
- $(‘#date’).datepicker(‘getDates’) 获取当前日期选择器中已选中的所有日期。
- 如果 selectedDates 数组中有且仅有两个日期，并且当前 date 介于这两个日期之间（包括起始和结束日期），则返回 ‘highlighted’ 字符串。这个字符串会被添加到当前日期的 HTML 元素上，从而应用我们在 CSS 中定义的背景色。

完整示例

将上述 HTML、CSS 和 JavaScript 片段组合，即可得到一个完整的、可运行的单日历日期范围选择器。

<!DOCTYPE html> <html lang="en"> <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>         body {             font-family: Arial, sans-serif;             padding: 20px;         }         .container {             max-width: 400px;             margin: 50px auto;             text-align: center;         }         .form-control {             width: 100%;             padding: 8px 12px;             border: 1px solid #ccc;             border-radius: 4px;             box-sizing: border-box;         }         .highlighted {             background-color: #99ccff !important; /* 高亮背景色 */             color: #fff !important; /* 高亮文字颜色 */         }     </style> </head> <body>      <div class="container">         <h2>选择日期范围 (单日历)</h2>         <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>      <script>         $(document).ready(function() {             $('#date').datepicker({                 startView: 0,                 minViewMode: 0,                 maxViewMode: 2,                 multidate: true,                 multidateSeparator: "-",                 autoClose: true,                 beforeShowDay: highlightRange,             }).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();                 });                  elem.data("selecteddates", dates.join(","));                 elem.datepicker('setDates', dates);             });              function highlightRange(date) {                 var selectedDates = $('#date').datepicker('getDates');                 if (selectedDates.length === 2 && date >= selectedDates[0] && date <= selectedDates[1]) {                     return 'highlighted';                 }                 return '';             }         });     </script>  </body> </html>

注意事项

依赖版本： 确保您使用的 jQuery 和 Bootstrap Datepicker 版本兼容。本教程使用的版本是 jQuery 2.1.1 和 Bootstrap Datepicker 1.8.0。
用户体验： 这种单日历选择方式在用户点击第一个日期后，会期待点击第二个日期来完成范围选择。如果用户意外点击了第三个日期，逻辑会自动更新为最新的两个日期，这可能需要用户适应。
清除选择： 如果用户想清除已选范围，可以考虑添加一个清除按钮，或者通过再次点击已选日期来实现。
国际化： 如果需要支持多语言，请记得引入 Bootstrap Datepicker 的语言包并进行相应配置。

总结

通过巧妙地结合 Bootstrap Datepicker 的 multidate 选项和自定义的 changeDate 事件处理以及 beforeShowDay 回调函数，我们成功实现了在一个日历界面上选择日期范围的功能。这种方法不仅提供了更简洁的用户界面，也展示了 Bootstrap Datepicker 强大的可扩展性，使其能够适应更多复杂的交互需求。

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