Bootstrap5 选择区间（保姆级教程）

什么是 Bootstrap5 选择区间？

在前端开发中，表单控件的交互体验直接影响用户操作的流畅度。尤其是在处理日期、时间或数值范围时，传统的单选输入框往往显得力不从心。这时候，“选择区间”就派上用场了。

Bootstrap5 选择区间，指的是利用 Bootstrap 5 框架提供的组件能力，让用户能够便捷地选择一个时间或数值的起始与结束范围。比如在预订系统中选择入住和退房日期、在数据分析工具中设定时间跨度等场景，都需要这种功能支持。

你可以把“选择区间”想象成一个“滑动的橡皮筋”：你先拉住一端，再拉住另一端，中间的区域就被选中了。这种直观的交互方式，正是 Bootstrap5 选择区间的核心价值所在。

虽然 Bootstrap 5 本身没有内置“选择区间”组件，但通过结合第三方库（如 flatpickr、daterangepicker）或原生 HTML5 的 <input type="date"> 与 JavaScript 的灵活处理，我们完全可以构建出功能强大且美观的区间选择器。

接下来，我们就一步步带你掌握如何在项目中实现 Bootstrap5 选择区间。

如何使用原生 HTML5 实现基本选择区间

最基础的实现方式是利用 HTML5 提供的 type="date" 输入框。虽然它不直接支持“区间”选择，但我们可以用两个日期输入框，配合 JavaScript 逻辑，来模拟出“选择区间”的效果。

下面是一个简单的例子：

<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <label for="startDate" class="form-label">开始日期</label>
      <input type="date" class="form-control" id="startDate" />

      <label for="endDate" class="form-label mt-3">结束日期</label>
      <input type="date" class="form-control" id="endDate" />

      <button class="btn btn-primary mt-3" id="submitBtn">确认选择</button>
    </div>
  </div>
</div>

// 获取两个输入框元素
const startDateInput = document.getElementById('startDate');
const endDateInput = document.getElementById('endDate');
const submitBtn = document.getElementById('submitBtn');

// 为结束日期绑定事件：防止结束日期早于开始日期
endDateInput.addEventListener('change', function () {
  const start = new Date(startDateInput.value);
  const end = new Date(endDateInput.value);

  if (start && end && end < start) {
    alert('结束日期不能早于开始日期！');
    endDateInput.value = ''; // 清空错误输入
  }
});

// 点击按钮时获取用户选择的区间
submitBtn.addEventListener('click', function () {
  const start = startDateInput.value;
  const end = endDateInput.value;

  if (!start || !end) {
    alert('请完整填写开始和结束日期！');
    return;
  }

  console.log('选择的区间为：', start, '到', end);
  // 这里可以将数据发送到后端或用于后续处理
});

注释说明：

• type="date" 会自动渲染出日历控件，支持用户点击选择。
• new Date() 用于将字符串格式的日期转换为可比较的 Date 对象。
• change 事件在用户修改输入框内容后触发，用于实时校验逻辑。
• alert() 用于提示用户输入错误，提升体验。

这种方式虽然简单，但功能有限。比如无法设置默认区间、无法拖动选择、无法直观预览范围。接下来，我们引入更强大的工具。

推荐使用 flatpickr 实现优雅的 Bootstrap5 选择区间

为了获得更现代、更美观的交互体验，推荐使用 flatpickr 这个轻量级的日期选择器库。它支持区间选择、自定义样式，并且与 Bootstrap 5 完美兼容。

安装 flatpickr

通过 CDN 方式引入是最简单的方式：

<!-- 引入 Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 引入 flatpickr CSS -->
<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">

<!-- 引入 flatpickr JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

配置区间选择器

<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <label for="dateRange" class="form-label">请选择日期区间</label>
      <input type="text" class="form-control" id="dateRange" placeholder="选择开始与结束日期" />
    </div>
  </div>
</div>

// 初始化 flatpickr，启用区间选择
flatpickr("#dateRange", {
  mode: "range",           // 设置为区间模式
  dateFormat: "Y-m-d",     // 设置日期格式为 年-月-日
  locale: "zh",            // 设置中文语言
  allowInput: true,        // 允许用户手动输入（可选）
  onClose: function (selectedDates, dateStr, instance) {
    console.log("选择的区间是：", dateStr);
    // 你可以在这里处理选中的区间数据
  }
});

注释说明：

• mode: "range" 是关键配置，它启用两个日期的联动选择。
• dateFormat: "Y-m-d" 表示输出格式为 2025-04-05，符合大多数后端需求。
• locale: "zh" 让日历显示中文，提升本地化体验。
• onClose 是用户关闭日历后的回调函数，可用于数据提交或后续处理。

此时，你只需点击输入框，就会弹出一个可拖拽的日期选择器，支持鼠标拖动或点击选择起止日期，交互体验远超原生输入框。

使用 daterangepicker 实现高级功能

如果你需要更丰富的功能，比如时间选择、自定义快捷选项、范围颜色标记等，可以考虑使用 daterangepicker。它功能强大，适合复杂场景。

引入 daterangepicker

<!-- 引入 Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 引入 daterangepicker CSS -->
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet">

<!-- 引入 jQuery 和 daterangepicker JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

配置区间选择器

<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <label for="rangePicker" class="form-label">选择时间区间</label>
      <input type="text" class="form-control" id="rangePicker" />
    </div>
  </div>
</div>

// 初始化 daterangepicker
$('#rangePicker').daterangepicker({
  locale: {
    format: 'YYYY-MM-DD',
    separator: ' 至 ',
    applyLabel: '确定',
    cancelLabel: '取消',
    fromLabel: '从',
    toLabel: '到',
    customRangeLabel: '自定义',
    weekLabel: '周',
    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
  },
  startDate: moment().subtract(7, 'days'),  // 默认开始日期为7天前
  endDate: moment(),                        // 默认结束日期为今天
  ranges: {
    '今天': [moment(), moment()],
    '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
    '最近7天': [moment().subtract(6, 'days'), moment()],
    '最近30天': [moment().subtract(29, 'days'), moment()]
  },
  opens: 'center',
  drops: 'down'
}, function (start, end, label) {
  console.log('你选择的区间是：', start.format('YYYY-MM-DD'), '到', end.format('YYYY-MM-DD'));
});

注释说明：

• locale 配置了中文显示和按钮文案，提升用户体验。
• startDate 和 endDate 设置了默认值。
• ranges 定义了常用的快捷选项，用户点击即可快速选择。
• onApply 回调在用户点击“确定”后触发，用于获取选中数据。

这个版本支持快捷选择、可拖拽、颜色标记范围，非常适合报表系统、活动管理等场景。

如何在实际项目中集成选择区间功能？

在真实项目中，选择区间往往需要与后端交互。下面是一个完整的流程示例：

1. 用户在前端选择一个日期区间（如：2025-04-01 到 2025-04-07）
2. 前端通过 JavaScript 将区间数据格式化为 JSON
3. 使用 fetch 或 axios 发送请求到后端接口
4. 后端返回对应时间段的数据，前端渲染展示

// 将区间数据发送到后端
function sendDateRange() {
  const startDate = document.getElementById('dateRange').value.split(' 至 ')[0];
  const endDate = document.getElementById('dateRange').value.split(' 至 ')[1];

  fetch('/api/data', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      start: startDate,
      end: endDate
    })
  })
  .then(response => response.json())
  .then(data => {
    console.log('获取到的数据：', data);
    // 在页面上渲染数据
    renderData(data);
  })
  .catch(err => {
    console.error('请求失败：', err);
  });
}

注释说明：

• split(' 至 ') 用于从 daterangepicker 的输出中提取起止日期。
• fetch 是现代浏览器原生的 HTTP 请求方式，无需额外库。
• JSON.stringify 将对象转为字符串，符合 API 接口规范。

这样，整个“选择区间 → 提交 → 获取数据 → 展示”的流程就完整了。

总结：掌握 Bootstrap5 选择区间的关键点

通过本文，我们系统学习了“Bootstrap5 选择区间”的多种实现方式。从最简单的原生 HTML5 输入框，到功能强大的 flatpickr 与 daterangepicker，每一种都有其适用场景。

• 如果只是简单需求，用两个 type="date" 输入框即可。
• 如果追求美观与交互体验，flatpickr 是最佳选择。
• 如果需要快捷选项、复杂逻辑，daterangepicker 更适合。

无论选择哪种方式，核心思想都是：让用户用最少的操作，完成最清晰的区间选择。

在实际开发中，建议优先考虑 flatpickr，它轻量、易用、支持 Bootstrap 5，且社区活跃，文档齐全。

希望这篇文章能帮你真正掌握“Bootstrap5 选择区间”这一实用技能。当你在下一个项目中，看到用户流畅地拖动日期、快速筛选数据时，你会为自己掌握这项技术感到自豪。