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

本文将介绍如何使用 Bootstrap Datepicker 插件实现一个单日历的日期范围选择器。通过配置 Datepicker 的参数，并结合 JavaScript 代码，可以实现选择起始日期和结束日期，并在日历上高亮显示所选范围的功能。这种方式相比于双日历的范围选择器，更加简洁直观，节省页面空间。

实现单日历范围选择

要实现单日历的日期范围选择，我们需要使用 multidate 选项，并自定义一些 JavaScript 代码来处理日期选择的逻辑。以下是具体的实现步骤：

1. 引入必要的 CSS 和 JavaScript 文件：

   首先，确保你的项目中引入了 jQuery、Bootstrap Datepicker 的 CSS 和 JavaScript 文件。

2. 创建 HTML 结构：

   创建一个输入框，用于显示选择的日期范围。

3. 初始化 Datepicker 并配置参数：

   

   CA.LA

   第一款时尚产品在线设计平台，服装设计系统

   下载

   使用 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);
   });

4. 实现 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 '';
   }

5. 添加 CSS 样式：

   添加 CSS 样式，用于设置高亮显示日期的背景颜色。

   .highlighted {
       background-color: #99ccff;
   }

完整代码示例

注意事项

• 确保引入的 Bootstrap Datepicker 版本支持 multidate 选项。
• 可以根据实际需求调整 Datepicker 的其他参数，例如日期格式、语言等。
• highlightRange 函数可以根据需要进行修改，例如添加不同的高亮样式或添加其他逻辑。

总结

通过以上步骤，我们可以使用 Bootstrap Datepicker 插件实现一个单日历的日期范围选择器。这种方式简洁直观，可以有效地提升用户体验。希望本文对你有所帮助。