Bootstrap 日期选择|极客教程

Bootstrap 日期选择

引言

在 Web 开发中，日期和时间选择是一个常见的需求。Bootstrap 是一个流行的前端框架，它提供了一系列的组件和工具，包括日期选择器。使用 Bootstrap 的日期选择器，我们可以轻松地在网页中添加日期和时间选择功能，使用户能够方便地输入或选择日期。

本文将详细介绍如何使用 Bootstrap 的日期选择器及其相关选项和配置。

准备工作

在开始之前，我们需要准备一些必要的资源。首先，我们需要引入 Bootstrap 的 CSS 文件和 JavaScript 文件。可以通过以下方式引入：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

以上代码中，通过使用 CDN 引入 Bootstrap 的 CSS 文件和 JavaScript 文件。注意，你也可以下载这些文件并保存到本地，然后通过相对路径引入。

接下来，我们还需要引入 Bootstrap 的日期选择器插件。日期选择器是基于 Bootstrap 的弹出式插件，需要单独引入。可以通过以下方式引入：

<!DOCTYPE html>
<html>
  <head>
    <!-- 引入 Bootstrap 的 CSS 和 JavaScript 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <!-- 引入日期选择器插件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.11.1/dist/css/bootstrap-datepicker3.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.11.1/dist/js/bootstrap-datepicker.min.js"></script>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

以上代码中，通过使用 CDN 引入日期选择器的 CSS 文件和 JavaScript 文件。

至此，我们已经准备好所需的资源，下面将进一步说明如何使用 Bootstrap 的日期选择器。

基本用法

首先，我们需要在 HTML 中创建一个日期选择器的输入框。可以使用 <input> 标签，并为其添加 data-provide、data-toggle 和 data-target 属性，如下所示：

<input type="text" data-provide="datepicker" data-toggle="datepicker" data-target="#datepicker">

以上代码中，我们通过三个属性指定了日期选择器的提供者、触发方式和目标元素。

然后，在 JavaScript 中，我们需要将日期选择器初始化，并为其指定一些选项和配置。可以通过以下方式初始化日期选择器：

$(document).ready(function(){
    $('#datepicker').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
        todayBtn: 'linked',
        todayHighlight: true,
        clearBtn: true
    });
});

以上代码中，我们使用了 jQuery，所以需要确保在初始化之前已经引入了 jQuery 文件。在上述代码中，我们为日期选择器指定了一些常用选项和配置，例如日期格式、自动关闭、今天按钮、今天高亮和清除按钮。

现在，日期选择器已经准备好使用了。用户可以点击输入框，选择一个日期。选择的日期将自动填充到输入框中。