概述
bootstrap datepicker是一个流行的日期选择组件，通常用于网页表单。默认情况下，当需要选择日期范围时，我们可能会倾向于使用input-daterange类，但这通常会导致显示两个独立的日历，一个用于开始日期，一个用于结束日期。然而，在某些场景下，我们希望在一个日历中完成日期范围的选择，并直观地高亮显示选定的范围。本教程将指导您如何实现这一目标。
核心思路
实现单日历日期范围选择的关键在于以下几点：
- 使用单个输入框： 而非两个独立的输入框。
- 启用multidate选项： 允许用户在一个日历中选择多个日期。
- 限制选择数量： 通过事件监听确保用户最多只能选择两个日期（起始和结束）。
- 高亮显示范围： 利用beforeShowDay回调函数，为选定日期之间的日期添加自定义样式。
准备工作
首先，确保您的项目中已引入jQuery和Bootstrap Datepicker的CSS及JS文件。
<!DOCTYPE html>
<html lang="zh-CN">
<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>
/* 自定义高亮样式 */
.highlighted {
background-color: #99ccff !important; /* 使用!important确保覆盖默认样式 */
color: #fff;
}
body {
padding: 20px;
}
.input-group {
width: 300px; /* 示例宽度 */
}
</style>
</head>
<body>
<h3>单日历日期范围选择器</h3>
<div class="input-group">
<input type="text" id="dateRangePicker" 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>
// JavaScript代码将在此处添加
</script>
</body>
</html>实现步骤
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文件：
<!DOCTYPE html>
<html lang="zh-CN">
<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>
/* 自定义高亮样式 */
.highlighted {
background-color: #99ccff !important; /* 使用!important确保覆盖默认样式 */
color: #fff !important;
border-radius: 0; /* 确保高亮区域是矩形 */
}
/* 确保选中的起始/结束日期也有良好的视觉效果 */
.datepicker table tr td.active.highlighted,
.datepicker table tr td.active:hover.highlighted {
background-color: #007bff !important; /* 选中日期（起始/结束）的背景色 */
color: #fff !important;
}
body {
padding: 20px;
}
.input-group {
width: 300px; /* 示例宽度 */
}
</style>
</head>
<body>
<h3>单日历日期范围选择器</h3>
<div class="input-group">
<input type="text" id="dateRangePicker" 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() {
$('#dateRangePicker').datepicker({
startView: 0, // 初始视图为日视图
minViewMode: 0, // 最小视图模式为日视图
maxViewMode: 2, // 最大视图模式为年视图
multidate: true, // 允许选择多个日期
multidateSeparator: " - ", // 多个日期之间的分隔符
autoClose: true, // 选择日期后自动关闭
todayHighlight: true, // 高亮今天
format: 'yyyy-mm-dd', // 日期格式
beforeShowDay: highlightRange // 指定高亮函数
}).on("changeDate", function(event) {
var selectedDates = event.dates;
var $elem = $(this);
// 避免无限循环，如果当前选择的日期与已存储的相同则退出
// 使用map和join来创建日期的唯一字符串表示
var currentSelectedDatesStr = selectedDates.map(d => d.getTime()).join(",");
if ($elem.data("selecteddates") === currentSelectedDatesStr) {
return;
}
// 如果选择的日期超过两个，则移除最早的日期，只保留最新的两个
if (selectedDates.length > 2) {
selectedDates = selectedDates.slice(selectedDates.length - 2); // 保留最后两个
}
// 确保日期是按时间顺序排列的
selectedDates.sort(function(a, b) {
return a.getTime() - b.getTime();
});
// 存储当前选中的日期，用于防止无限循环
$elem.data("selecteddates", selectedDates.map(d => d.getTime()).join(","));
// 更新Datepicker的内部日期，确保显示和逻辑一致
$elem.datepicker('setDates', selectedDates);
});
// 高亮日期范围的函数
function highlightRange(date) {
var selectedDates = $('#dateRangePicker').datepicker('getDates');
// 如果已经选择了两个日期，并且当前日期在两个日期之间，则添加高亮类
if (selectedDates.length === 2 && date >= selectedDates[0] && date <= selectedDates[1]) {
return 'highlighted'; // 返回自定义CSS类名
}
return ''; // 否则不添加任何特殊类
}
});
</script>
</body>
</html>总结
通过上述步骤，我们成功地将Bootstrap Datepicker配置为一个单日历的日期范围选择器。这种方法利用了multidate功能，并通过自定义JavaScript逻辑和CSS样式，提供了直观的用户体验。这种实现方式不仅节省了屏幕空间，也使得日期范围的选择过程更加流畅和统一。在实际项目中，您可以根据需要进一步定制样式和行为，例如添加日期验证、限制可选日期范围等。
