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

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

聖光之護

发布： 2025-08-30 18:28:13

原创

231人浏览过

使用 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 并配置参数：

表单大师AI
一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情

使用 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>

登录后复制