正文

如何用Bootstrap实现年月日联动选择器：轻松解决日期范围选取问题

/0 浏览量
0529

在网页设计中，日期选择器是一个常见的组件，它可以帮助用户轻松地选择日期。Bootstrap 提供了一个强大的日期选择器插件，可以轻松实现年月日联动选择器。下面，我将详细讲解如何使用 Bootstrap 实现这一功能。

准备工作

在开始之前，请确保你的项目中已经引入了 Bootstrap 的 CSS 和 JS 文件。以下是 Bootstrap 的 CDN 链接：

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

<!-- 引入 Bootstrap JS 和依赖的 Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

创建日期选择器

首先，我们需要创建一个用于显示日期的输入框。这里，我们将使用 Bootstrap 的 input-group 组件来创建一个带有前缀和后缀的输入框。

<div class="input-group date" id="datePicker">
  <span class="input-group-text">年</span>
  <input type="text" class="form-control" placeholder="选择年份">
  <span class="input-group-text">月</span>
  <input type="text" class="form-control" placeholder="选择月份">
  <span class="input-group-text">日</span>
  <input type="text" class="form-control" placeholder="选择日期">
</div>

初始化日期选择器插件

接下来，我们需要使用 Bootstrap 的日期选择器插件来初始化日期选择器。首先，确保你的 HTML 元素具有一个唯一的 id 属性，这样我们才能在 JavaScript 中引用它。

document.addEventListener('DOMContentLoaded', function () {
  var date = new Date();
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();

  var datePicker = $('#datePicker').datepicker({
    format: 'yyyy-mm-dd',
    startDate: new Date(year, month - 1, day),
    endDate: new Date(year, month, day)
  });

  datePicker.datepicker('setDate', new Date(year, month - 1, day));
});

实现年月日联动

为了实现年月日联动，我们需要监听月份和日期输入框的 change 事件，并更新年份和日期输入框的值。

$('#datePicker input[type="text"]').on('change', function () {
  var year = $('#datePicker input[type="text"]:eq(0)').val();
  var month = $('#datePicker input[type="text"]:eq(1)').val();
  var day = $('#datePicker input[type="text"]:eq(2)').val();

  var date = new Date(year, month - 1, day);
  var maxDay = new Date(year, month, 0).getDate();

  if (day > maxDay) {
    day = maxDay;
  }

  $('#datePicker input[type="text"]:eq(0)').val(year);
  $('#datePicker input[type="text"]:eq(1)').val(month);
  $('#datePicker input[type="text"]:eq(2)').val(day);

  var datePicker = $('#datePicker').datepicker('setDate', date);
});

总结

通过以上步骤，我们已经成功实现了年月日联动选择器。用户可以轻松地选择日期范围，并且联动效果非常流畅。希望这篇文章能帮助你解决日期范围选取问题。

-- 展开阅读全文 --