概述
bootstrap datepicker是一个流行的日期选择组件，通常用于网页表单。默认情况下，当需要选择日期范围时，我们可能会倾向于使用input-daterange类，但这通常会导致显示两个独立的日历，一个用于开始日期，一个用于结束日期。然而，在某些场景下，我们希望在一个日历中完成日期范围的选择，并直观地高亮显示选定的范围。本教程将指导您如何实现这一目标。
核心思路
实现单日历日期范围选择的关键在于以下几点：
- 使用单个输入框： 而非两个独立的输入框。
- 启用multidate选项： 允许用户在一个日历中选择多个日期。
- 限制选择数量： 通过事件监听确保用户最多只能选择两个日期（起始和结束）。
- 高亮显示范围： 利用beforeShowDay回调函数，为选定日期之间的日期添加自定义样式。
准备工作
首先，确保您的项目中已引入jQuery和Bootstrap Datepicker的CSS及JS文件。
Bootstrap Datepicker单日历日期范围
单日历日期范围选择器
实现步骤
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文件：
Bootstrap Datepicker单日历日期范围
单日历日期范围选择器
总结
通过上述步骤，我们成功地将Bootstrap Datepicker配置为一个单日历的日期范围选择器。这种方法利用了multidate功能，并通过自定义JavaScript逻辑和CSS样式，提供了直观的用户体验。这种实现方式不仅节省了屏幕空间，也使得日期范围的选择过程更加流畅和统一。在实际项目中，您可以根据需要进一步定制样式和行为，例如添加日期验证、限制可选日期范围等。
