Bootstrap每天必学之日期控制

日期控制是Web开发中必不可少的组件之一，Bootstrap也提供了强大的日期控制功能。本篇文章将深入探讨Bootstrap的日期控制功能，让您可以轻松掌握这个组件。

1. 导入日期控制组件

在Bootstrap中，日期控制组件需要依赖bootstrap-datepicker.js和bootstrap-datepicker.css两个文件。可以手动下载上述文件，也可以通过CDN引入。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script>

2. 基本使用

在HTML中，创建一个带有日期控制的文本框非常简单。只需要在文本框后面添加一个按钮，并为其绑定日期控制弹出窗口即可。

<div class="input-group date">
  <input type="text" class="form-control">
  <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

接下来，通过JavaScript初始化日期控制组件，并将其应用到文本框上。

$('.input-group.date').datepicker({
  format: 'yyyy-mm-dd'
});

此时，我们已经成功添加了日期控制功能。用户点击文本框后面的按钮，即可弹出日期控制窗口，选择日期后，该日期将自动填充到文本框中。

3. 更多配置选项

Bootstrap的日期控制组件支持非常多的配置选项，可以根据不同的需求进行自定义配置。

3.1 指定时间格式

通过设置format选项，可以指定时间格式。

$('.input-group.date').datepicker({
  format: 'yyyy-mm-dd'
});

3.2 设置可选日期区间

通过设置startDate和endDate选项，可以设置日期可选范围。例如，以下代码指定可选日期为2021年1月1日至2021年12月31日。

$('.input-group.date').datepicker({
  format: 'yyyy-mm-dd',
  startDate: '2021-01-01',
  endDate: '2021-12-31'
});

3.3 显示今日按钮

通过设置todayBtn选项为true，可以在日期控制窗口上添加一个“今日”按钮，用于快速选择当前日期。

$('.input-group.date').datepicker({
  format: 'yyyy-mm-dd',
  todayBtn: true
});

4. 示例说明

以下是两个示例说明。

4.1 指定默认日期

<div class="input-group date">
  <input type="text" class="form-control">
  <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

在JavaScript中，指定默认日期为当前日期。

var date = new Date();
$('.input-group.date').datepicker({
  format: 'yyyy-mm-dd',
  startDate: date,
  endDate: date
});

4.2 限制日期选择范围

<div class="input-group date">
  <input type="text" class="form-control">
  <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

在JavaScript中，限制日期选择范围为2022年1月1日至2022年12月31日。

$('.input-group.date').datepicker({
  format: 'yyyy-mm-dd',
  startDate: '2022-01-01',
  endDate: '2022-12-31'
});

以上两个示例仅供参考，您可以根据实际需求进行自定义。