Bootstrap单日历日期范围选择教程

本教程详细讲解了如何利用 Bootstrap Datepicker 打造单日历的日期范围选择功能，告别默认的双日历模式，提升用户体验。通过巧妙运用 `multidate` 选项和自定义 JavaScript 事件监听，用户可以在一个日历界面上轻松选择起始和结束日期，并实时高亮显示所选范围。文章从实现原理、准备工作入手，逐步展示 HTML 结构、CSS 样式以及核心 JavaScript 代码，包括初始化 Datepicker、处理日期选择事件、以及高亮显示日期范围的关键函数 `highlightRange`。更有完整示例代码，助你快速掌握 Bootstrap Datepicker 的高级用法，实现更简洁、直观的日期选择交互。 无论您是前端开发新手还是经验丰富的工程师，都能从中受益，为您的网页表单增添更强大的功能。

概述

Bootstrap Datepicker 是一个功能强大的日期选择组件，广泛应用于网页表单中。然而，当需要实现日期范围选择时，通常的 input-daterange 结构会默认显示两个独立的日历，分别用于选择开始日期和结束日期。在某些场景下，用户可能更倾向于在一个日历界面上完成日期范围的选择，这不仅能节省屏幕空间，也能提供更流畅的交互体验。本教程将指导您如何通过自定义配置和事件处理，实现这一需求。

实现原理

实现单日历日期范围选择的核心思路是：

1. 使用单个输入框： 避免使用 input-daterange 结构，转而使用一个普通的文本输入框作为日期选择器。
2. 启用 multidate 选项： 允许日期选择器同时选择多个日期。
3. 自定义 changeDate 事件： 监听日期选择事件，确保只保留两个日期（起始和结束），并对它们进行排序。
4. 利用 beforeShowDay 回调： 在日历渲染前，根据已选择的两个日期，高亮显示它们之间的所有日期。

准备工作

在开始之前，请确保您的项目中已引入以下必要的库文件：

• jQuery
• Bootstrap Datepicker CSS 文件
• Bootstrap Datepicker JavaScript 文件

<!-- 引入 Bootstrap Datepicker CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>

<!-- 引入 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>

HTML 结构

我们只需要一个简单的 input 元素作为日期选择器：

<input type="text" id="date" class="form-control">

CSS 样式

为了高亮显示选定的日期范围，我们需要添加一个自定义的 CSS 类。当日期位于选定范围内时，beforeShowDay 回调函数将为其添加此样式。

.highlighted {
  background-color: #99ccff !important; /* 使用 !important 确保覆盖默认样式 */
  color: #fff;
}

JavaScript 实现

这是实现单日历日期范围选择的核心部分。我们将初始化 datepicker 并添加自定义逻辑。

$(document).ready(function() {
  $('#date').datepicker({
    startView: 0,           // 初始视图模式：0=天，1=月，2=年
    minViewMode: 0,         // 最小视图模式：0=天
    maxViewMode: 2,         // 最大视图模式：2=年
    multidate: true,        // 允许选择多个日期
    multidateSeparator: "-",// 多个日期之间的分隔符（虽然在此场景下我们只显示两个日期，但这是multidate的配置）
    autoClose: true,        // 选择日期后自动关闭日历
    beforeShowDay: highlightRange, // 在渲染每个日期之前调用的函数
  }).on("changeDate", function(event) {
    var dates = event.dates; // 获取当前选中的所有日期数组
    var elem = $('#date');

    // 避免因 setDates 触发的无限循环
    // 如果当前选中的日期与之前存储的日期相同，则不进行处理
    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();
    });

    // 将排序后的日期存储在data属性中，用于防止无限循环
    elem.data("selecteddates", dates.join(","));
    // 更新日期选择器的内部日期，确保日历显示正确
    elem.datepicker('setDates', dates);
  });

  /**
   * beforeShowDay 回调函数，用于高亮显示日期范围
   * @param {Date} date - 当前正在渲染的日期对象
   * @returns {string} - 返回 'highlighted' 类名以高亮显示，否则返回空字符串
   */
  function highlightRange(date) {
    var selectedDates = $('#date').datepicker('getDates'); // 获取当前已选中的日期数组

    // 如果已选中两个日期，并且当前日期介于这两个日期之间（包括边界）
    if (selectedDates.length === 2 && date >= selectedDates[0] && date <= selectedDates[1]) {
      return 'highlighted'; // 返回 'highlighted' 类名
    }
    return ''; // 不添加任何类名
  }
});

代码详解

1. $('#date').datepicker({...}) 初始化：
   • multidate: true: 这是关键，它允许用户点击日历上的多个日期。
   • autoClose: true: 在选择日期后自动关闭日历，提升用户体验。
   • beforeShowDay: highlightRange: 指定一个回调函数，该函数在日历中的每个日期单元格渲染之前被调用。它的返回值可以是一个 CSS 类名，用于添加到该日期单元格上。
2. .on("changeDate", function(event) { ... }) 事件处理：
   • 当日期选择器中的日期发生变化时，此事件会被触发。
   • event.dates：一个数组，包含了当前所有被选中的日期对象。
   • 防止无限循环： elem.data("selecteddates") 用于存储当前已处理的日期字符串，与 event.dates.join(",") 进行比较，避免在 datepicker('setDates', dates) 再次触发 changeDate 时进入死循环。
   • 限制日期数量： if (dates.length > 2) dates = dates.splice(dates.length - 1); 确保 dates 数组中最多只有两个日期。当用户选择第三个日期时，最旧的日期会被移除，保留最新的两个。
   • 日期排序： dates.sort(...) 确保数组中的第一个日期是起始日期，第二个是结束日期，这对于 highlightRange 函数至关重要。
   • elem.datepicker('setDates', dates)： 更新日期选择器内部的选中日期状态。这会重新渲染日历，并触发 beforeShowDay 回调。
3. highlightRange(date) 函数：
   • 此函数接收一个 Date 对象作为参数，代表当前正在渲染的日历日期。
   • $('#date').datepicker('getDates') 获取当前日期选择器中已选中的所有日期。
   • 如果 selectedDates 数组中有且仅有两个日期，并且当前 date 介于这两个日期之间（包括起始和结束日期），则返回 'highlighted' 字符串。这个字符串会被添加到当前日期的 HTML 元素上，从而应用我们在 CSS 中定义的背景色。

完整示例

将上述 HTML、CSS 和 JavaScript 片段组合，即可得到一个完整的、可运行的单日历日期范围选择器。

<!DOCTYPE html>
<html lang="en">
<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>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .container {
            max-width: 400px;
            margin: 50px auto;
            text-align: center;
        }
        .form-control {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .highlighted {
            background-color: #99ccff !important; /* 高亮背景色 */
            color: #fff !important; /* 高亮文字颜色 */
        }
    </style>
</head>
<body>

    <div class="container">
        <h2>选择日期范围 (单日历)</h2>
        &lt;input type=&quot;text&quot; id=&quot;date&quot; class=&quot;form-control&quot; placeholder=&quot;点击选择日期范围&quot;&gt;
    </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() {
            $('#date').datepicker({
                startView: 0,
                minViewMode: 0,
                maxViewMode: 2,
                multidate: true,
                multidateSeparator: "-",
                autoClose: true,
                beforeShowDay: highlightRange,
            }).on("changeDate", function(event) {
                var dates = event.dates;
                var 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(","));
                elem.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>

注意事项

• 依赖版本： 确保您使用的 jQuery 和 Bootstrap Datepicker 版本兼容。本教程使用的版本是 jQuery 2.1.1 和 Bootstrap Datepicker 1.8.0。
• 用户体验： 这种单日历选择方式在用户点击第一个日期后，会期待点击第二个日期来完成范围选择。如果用户意外点击了第三个日期，逻辑会自动更新为最新的两个日期，这可能需要用户适应。
• 清除选择： 如果用户想清除已选范围，可以考虑添加一个清除按钮，或者通过再次点击已选日期来实现。
• 国际化： 如果需要支持多语言，请记得引入 Bootstrap Datepicker 的语言包并进行相应配置。

总结

通过巧妙地结合 Bootstrap Datepicker 的 multidate 选项和自定义的 changeDate 事件处理以及 beforeShowDay 回调函数，我们成功实现了在一个日历界面上选择日期范围的功能。这种方法不仅提供了更简洁的用户界面，也展示了 Bootstrap Datepicker 强大的可扩展性，使其能够适应更多复杂的交互需求。

本篇关于《Bootstrap单日历日期范围选择教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！