如何在 Bootstrap(HTML 表单)中添加 Datepicker

Bootstrap 是一个流行的 HTML，CSS 和 JavaScript 库，可以使用它来创建漂亮的响应式用户界面。它包含了很多有用的组件，其中之一是日期选择器（datepicker）。在这篇文章中，我们将介绍如何在 Bootstrap 表单中添加日期选择器。

使用 Bootstrap-datepicker 插件

Bootstrap-datepicker 是一个流行的 JavaScript 插件，它可以为 Bootstrap 表单添加日期选择器。它提供了很多有用的选项和方法，可以让我们轻松地自定义日期选择器的外观和行为。

以下是如何使用 Bootstrap-datepicker 的步骤：

1. 引入必要的文件

首先，我们需要将必要的文件添加到 HTML 页面中。这些文件包括 bootstrap-datepicker.css、bootstrap-datepicker.js 和 jQuery（因为 Bootstrap-datepicker 依赖于 jQuery）。

<!-- 引入 Bootstrap 样式文件 -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- 引入 Bootstrap-datepicker 样式文件 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">

<!-- 引入 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- 引入 Bootstrap-datepicker JS 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

2. 添加表单代码

接下来，我们需要在 HTML 页面中添加表单代码，并将日期选择器添加到表单中。以下是一个简单的表单示例：

<form>
  <div class="form-group">
    <label for="datepicker">日期选择器</label>
    <input type="text" class="form-control" id="datepicker">
  </div>
</form>

在上述示例中，我们创建了一个包含一个日期选择器的表单。日期选择器的 id 属性为 datepicker，这个将会在 JavaScript 中用到。

3. 初始化日期选择器

最后，我们需要编写一些 JavaScript 代码来初始化日期选择器。以下是如何初始化日期选择器的代码：

$(function() {
  $('#datepicker').datepicker();
});

在上述代码中，我们使用 jQuery 选择器选中了日期选择器的输入框，并调用了 datepicker() 方法来初始化日期选择器。现在，我们就可以在表单中使用日期选择器了。

自定义日期选择器选项

Bootstrap-datepicker 允许我们自定义日期选择器的一些选项。例如，我们可以更改日期选择器的外观、日期格式和语言等。以下是如何自定义日期选择器选项的代码：

$(function() {
  $('#datepicker').datepicker({
    format: 'yyyy-mm-dd',
    language: 'zh-CN',
    autoclose: true,
    todayHighlight: true
  });
});

在上述代码中，我们指定了日期选择器的格式、语言、自动关闭和今天的高亮选项。现在，日期选择器的外观和行为已经符合我们的需求了。

结论

在本文中，我们介绍了如何在 Bootstrap 表单中添加日期选择器。我们使用了 Bootstrap-datepicker 插件来实现这个目标，并演示了如何自定义日期选择器的选项。希望这篇文章能够帮助你在自己的项目中使用日期选择器。