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