Bootstrap Datepicker 单日历日期范围选择实现教程-js教程-PHP中文网

Bootstrap Datepicker 单日历日期范围选择实现教程

本教程详细介绍了如何使用 Bootstrap Datepicker 实现单日历的日期范围选择功能。通过配置 multidate 选项并结合 changeDate 事件监听和 beforeShowDay 回调函数，我们可以有效地管理两个日期的选择、排序以及在日历上高亮显示选定的日期范围，从而提供一个直观且用户友好的日期范围选择体验。

概述

在网页开发中，日期选择器是常见的交互组件。bootstrap datepicker 提供了一个强大且灵活的解决方案。然而，当需要选择一个日期范围时，默认的 input-daterange 配置通常会显示两个独立的日历，一个用于开始日期，一个用于结束日期。这在某些场景下可能不符合设计需求，用户可能更倾向于在一个日历上完成日期范围的选择。本教程将指导您如何通过自定义配置，利用 bootstrap datepicker 的 multidate 特性，实现单日历的日期范围选择与高亮显示。

核心实现原理

实现单日历日期范围选择的关键在于以下几点：

multidate: true: 启用多日期选择模式，允许用户在同一个日历上选择多个日期。
changeDate 事件监听: 捕获用户选择日期的变化，并在此事件中处理选择逻辑，确保只保留两个日期（开始和结束），并对其进行排序。
beforeShowDay 回调: 在日历渲染每个日期之前调用，用于根据当前选择的日期范围，为特定日期添加自定义样式，实现高亮效果。

准备工作

首先，确保您的项目中已引入 Bootstrap Datepicker 及其依赖。通常需要 jQuery 和 Bootstrap Datepicker 的 CSS 和 JavaScript 文件。

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

<!-- 您的 HTML 结构 -->
<input type="text" id="date" class="form-control">

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

登录后复制

实现步骤与代码示例

1. HTML 结构

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

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

登录后复制

2. CSS 样式

为了高亮显示选定的日期范围，我们需要定义一个 CSS 类。

UP简历

基于AI技术的免费在线简历制作工具

128

查看详情

<style>
  .highlighted {
    background-color: #99ccff; /* 自定义高亮颜色 */
    border-radius: 0; /* 根据需要调整，使其看起来更像一个范围 */
  }
  /* 确保高亮样式在日期选择器中生效 */
  .datepicker table tr td.highlighted {
    background-color: #99ccff;
    color: #fff; /* 文本颜色 */
  }
</style>

登录后复制

3. JavaScript 配置与逻辑

这是实现单日历日期范围选择的核心部分。

$(document).ready(function() {
  // 初始化日期选择器
  $('#date').datepicker({
    startView: 0,           // 初始视图：0=天，1=月，2=年
    minViewMode: 0,         // 最小视图模式：0=天
    maxViewMode: 2,         // 最大视图模式：2=年
    multidate: true,        // 启用多日期选择
    multidateSeparator: "-",// 多日期选择时的分隔符，实际显示不受影响，主要用于内部处理
    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();
    });

    // 存储当前选择的日期，用于防止无限循环
    elem.data("selecteddates", dates.join(","));
    // 更新日期选择器的内部状态，显示排序后的两个日期
    elem.datepicker('setDates', dates);
  });

  // `beforeShowDay` 回调函数，用于高亮显示日期范围
  function highlightRange(date) {
    // 获取当前日期选择器中已选择的日期数组
    var selectedDates = $('#date').datepicker('getDates');

    // 如果已选择了两个日期，并且当前日期在选择范围内，则返回 'highlighted' 类名
    if (selectedDates.length === 2 && date >= selectedDates[0] && date <= selectedDates[1]) {
      return 'highlighted'; // 应用高亮样式
    }
    return ''; // 不应用任何特殊样式
  }
});

登录后复制

关键配置与函数说明

multidate: true: 这是启用多日期选择的关键。当设置为 true 时，用户可以点击多个日期，这些日期会以数组形式存储在 event.dates 中。
multidateSeparator: "-": 定义多日期字符串表示形式的分隔符，但在此实现中，我们主要通过 getDates() 获取日期对象数组进行处理。
autoClose: true: 当用户选择日期后，日历会自动关闭。
changeDate 事件: 当日期选择器的值发生变化时触发。我们利用此事件来：
- 获取 event.dates (一个包含所有已选日期对象的数组)。
- 通过 elem.data("selecteddates") 避免 setDates 导致的无限循环。
- 限制 dates 数组的长度为最多两个，确保始终只有开始和结束日期。
- 对 dates 数组进行排序，保证第一个是较早的日期，第二个是较晚的日期。
- 使用 elem.datepicker('setDates', dates) 更新日期选择器，以反映排序和筛选后的日期。
beforeShowDay 回调函数:
- 该函数在渲染日历中的每个日期单元格之前被调用，并接收一个 Date 对象作为参数，代表当前正在渲染的日期。
- 它期望返回一个字符串或一个数组。如果返回一个字符串，该字符串会被作为 CSS 类名添加到日期单元格上。如果返回一个数组，数组的第一个元素是布尔值（true 启用，false 禁用），第二个元素是 CSS 类名，第三个元素是工具提示文本。
- 在此例中，我们检查当前日期 date 是否在 selectedDates[0] 和 selectedDates[1] 之间，如果是，则返回 'highlighted' 类名以应用高亮样式。

完整示例

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

<!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;
      }
      /* 确保高亮样式在日期选择器中生效 */
      .datepicker table tr td.highlighted.day {
        border-radius: 0; /* 使高亮区域更连续 */
      }
      .datepicker table tr td.highlighted.range-start,
      .datepicker table tr td.highlighted.range-end {
        border-radius: 50%; /* 可选：让开始和结束日期更突出 */
      }
      body {
        font-family: Arial, sans-serif;
        padding: 20px;
      }
      .container {
        max-width: 400px;
        margin: 50px auto;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
    </style>
</head>
<body>
    <div class="container">
        <h3>选择日期范围 (单日历)</h3>
        <div class="form-group">
            <label for="date">选择开始日期和结束日期:</label>
            <input type="text" id="date" class="form-control" placeholder="点击选择日期">
        </div>
    </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,           // 初始视图：0=天，1=月，2=年
                minViewMode: 0,         // 最小视图模式：0=天
                maxViewMode: 2,         // 最大视图模式：2=年
                multidate: true,        // 启用多日期选择
                multidateSeparator: "-",// 多日期选择时的分隔符，实际显示不受影响，主要用于内部处理
                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) {
                    // 如果选择了超过两个日期，只保留最后选择的两个
                    // 例如，如果选择了 1,2,3，则只保留 2,3
                    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(","));
                // 更新日期选择器的内部状态，显示排序后的两个日期
                // 这也会触发 beforeShowDay 重新渲染日历
                elem.datepicker('setDates', dates);

                // 更新 input 框的显示值
                if (dates.length === 2) {
                    var startDate = $.fn.datepicker.formatDate('yyyy-mm-dd', dates[0]);
                    var endDate = $.fn.datepicker.formatDate('yyyy-mm-dd', dates[1]);
                    elem.val(startDate + ' - ' + endDate);
                } else if (dates.length === 1) {
                    elem.val($.fn.datepicker.formatDate('yyyy-mm-dd', dates[0]));
                } else {
                    elem.val('');
                }
            });

            // `beforeShowDay` 回调函数，用于高亮显示日期范围
            function highlightRange(date) {
                // 获取当前日期选择器中已选择的日期数组
                var selectedDates = $('#date').datepicker('getDates');

                // 如果已选择了两个日期，并且当前日期在选择范围内，则返回 'highlighted' 类名
                if (selectedDates.length === 2 && date >= selectedDates[0] && date <= selectedDates[1]) {
                    return {
                        classes: 'highlighted',
                        tooltip: 'Selected Range'
                    };
                }
                // 返回空字符串或空对象表示不应用特殊样式
                return '';
            }
        });
    </script>
</body>
</html>

登录后复制

注意事项

依赖项: 确保正确引入了 jQuery 和 Bootstrap Datepicker 的 CSS/JS 文件。
CSS 优先级: 如果高亮样式不生效，可能需要调整 CSS 优先级，例如使用 !important 或更具体的选择器。
用户体验:
- 当用户只选择一个日期时，输入框中可以显示该日期。当选择第二个日期后，显示范围。
- 如果用户希望清除选择，可以考虑添加一个清除按钮或通过再次点击已选日期来取消选择。
日期格式化: $.fn.datepicker.formatDate 可以帮助您将日期对象格式化为用户友好的字符串，以便显示在输入框中。
错误处理: 虽然本教程主要关注核心功能实现，但在生产环境中，您可能还需要考虑用户手动输入非法日期或进行其他异常操作时的处理。

总结

通过巧妙地结合 Bootstrap Datepicker 的 multidate 选项、changeDate 事件监听以及 beforeShowDay 回调函数，我们成功实现了在一个日历上选择并高亮显示日期范围的功能。这种方法不仅提供了更简洁的用户界面，也提升了用户体验，使其能够直观地选择所需的日期区间。掌握这些技术，您将能够更灵活地定制日期选择器以满足各种复杂的业务需求。

以上就是Bootstrap Datepicker 单日历日期范围选择实现教程的详细内容，更多请关注php中文网其它相关文章！