本文将介绍如何使用 Bootstrap Datepicker 插件实现一个单日历的日期范围选择器。通过配置 Datepicker 的参数，并结合 JavaScript 代码，可以实现选择起始日期和结束日期，并在日历上高亮显示所选范围的功能。这种方式相比于双日历的范围选择器，更加简洁直观，节省页面空间。
实现单日历范围选择
要实现单日历的日期范围选择，我们需要使用 multidate 选项，并自定义一些 JavaScript 代码来处理日期选择的逻辑。以下是具体的实现步骤：
-
引入必要的 CSS 和 JavaScript 文件：
首先，确保你的项目中引入了 jQuery、Bootstrap Datepicker 的 CSS 和 JavaScript 文件。
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
-
创建 HTML 结构：
创建一个输入框，用于显示选择的日期范围。
<input type="text" id="date">
-
初始化 Datepicker 并配置参数：
使用 JavaScript 代码初始化 Datepicker，并配置以下参数：
- startView: 设置起始视图为 "月"。
- minViewMode: 设置最小视图模式为 "日"。
- maxViewMode: 设置最大视图模式为 "年"。
- multidate: 启用多选日期模式。
- multidateSeparator: 设置多个日期之间的分隔符。
- autoClose: 选择日期后自动关闭日历。
- beforeShowDay: 在显示每一天之前调用的函数，用于高亮显示选定的日期范围。
$('#date').datepicker({ startView: 0, minViewMode: 0, maxViewMode: 2, multidate: true, multidateSeparator: "-", autoClose: true, beforeShowDay: highlightRange, }).on("changeDate", function(event) { var dates = event.dates, 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(",")).datepicker('setDates', dates); }); -
实现 highlightRange 函数：
highlightRange 函数用于在日历上高亮显示选定的日期范围。它接收一个 date 参数，表示当前要显示的日期。如果 date 位于选定的日期范围内，则返回 highlighted 类名，否则返回空字符串。
function highlightRange(date) { var selectedDates = $('#date').datepicker('getDates'); if (selectedDates.length === 2 && date >= selectedDates[0] && date <= selectedDates[1]) { return 'highlighted'; } return ''; } -
添加 CSS 样式：
添加 CSS 样式，用于设置高亮显示日期的背景颜色。
.highlighted { background-color: #99ccff; }
完整代码示例
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Datepicker Single Calendar Range</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
<style>
.highlighted {
background-color: #99ccff;
}
</style>
</head>
<body>
<input type="text" id="date">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script>
$('#date').datepicker({
startView: 0,
minViewMode: 0,
maxViewMode: 2,
multidate: true,
multidateSeparator: "-",
autoClose: true,
beforeShowDay: highlightRange,
}).on("changeDate", function(event) {
var dates = event.dates,
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(",")).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>注意事项
- 确保引入的 Bootstrap Datepicker 版本支持 multidate 选项。
- 可以根据实际需求调整 Datepicker 的其他参数，例如日期格式、语言等。
- highlightRange 函数可以根据需要进行修改，例如添加不同的高亮样式或添加其他逻辑。
总结
通过以上步骤，我们可以使用 Bootstrap Datepicker 插件实现一个单日历的日期范围选择器。这种方式简洁直观，可以有效地提升用户体验。希望本文对你有所帮助。
