使用 Bootstrap Datepicker 实现单日历范围选择-小浪学习网

使用 Bootstrap Datepicker 实现单日历范围选择

本文将介绍如何使用 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>