Bootstrap Datepicker

1. 介绍

Bootstrap Datepicker是一款基于Bootstrap框架的日期选择插件，它为用户提供了一种简单、美观且易于使用的日期选择功能。利用Bootstrap Datepicker，开发者可以轻松地向网站或应用程序添加日期选择器，以提高用户体验，并简化日期选择的实现。

2. 安装和使用

要使用Bootstrap Datepicker，首先需要引入Bootstrap和jQuery库。然后，可以通过下载插件的源代码并将其包含在项目中，或者使用CDN链接来引入插件。

以下是在HTML文件中引入相关库和插件的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker.min.css">
  <title>Bootstrap Datepicker Example</title>
</head>
<body>
  <form>
    <div class="form-group">
      <label for="datepicker">选择日期：</label>
      <input type="text" class="form-control" id="datepicker" placeholder="点击选择日期">
    </div>
  </form>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script>
</body>
</html>

在上面的示例中，我们通过CDN链接引入了Bootstrap和Bootstrap Datepicker的相关文件。然后，在一个表单中添加了一个用于日期选择的文本输入框，并使用了相应的class类。

要启用日期选择功能，我们还需要在Script标签中编写一些JavaScript代码来激活插件和配置选项。

以下是一个基本的JavaScript示例：

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

在上面的代码中，我们使用了jQuery的ready方法，以确保在文档完全加载后再执行相关代码。然后，我们选择具有ID为datepicker的元素，并调用datepicker方法，以启用日期选择功能。

在datepicker方法中，我们可以配置一些选项。例如，format选项用于指定日期的显示格式，autoclose选项用于在选择日期后自动关闭日期选择器，todayHighlight选项用于突出显示当前日期。

3. 配置选项

Bootstrap Datepicker提供了许多可以配置的选项，以满足不同需求。以下是一些常用的选项：

format：指定日期的显示格式。例如，yyyy-mm-dd表示年-月-日的格式。
autoclose：选择日期后是否自动关闭日期选择器。默认为false。
todayHighlight：是否突出显示当前日期。默认为false。
startDate：指定可选择的最早日期，可以是一个日期对象、一个字符串或一个相对值。例如，-1d表示昨天。
endDate：指定可选择的最晚日期，可以是一个日期对象、一个字符串或一个相对值。例如，+1w表示一周后。
language：指定日期选择器的语言。默认为美国英语。
weekStart：指定一周的起始日期。默认为0，表示星期日。
daysOfWeekDisabled：禁用一周中的某几天。例如，[0,6]表示禁用星期日和星期六。

可以根据具体的需求选择和配置相应的选项。

4. 事件和方法

Bootstrap Datepicker还提供了一些常用的事件和方法，以便进行交互和操作。

4.1 事件

show：在日期选择器显示之前触发。
hide：在日期选择器隐藏之后触发。
changeDate：在选择日期后触发。
clearDate：在清除日期后触发。

以下是如何使用changeDate事件的示例：

$('#datepicker').on('changeDate', function(e) {
  console.log(e.date);
});

在上面的示例中，我们为具有ID为datepicker的元素注册了一个事件监听器。每当选择了一个新的日期时，将会调用回调函数，并将选择的日期作为参数传递给该函数。

4.2 方法

getDate：获取当前选择的日期。
setDate：设置日期选择器的日期。
update：更新日期选择器的配置。

以下是如何使用setDate方法来设置日期选择器的日期的示例：

$('#datepicker').datepicker('setDate', '2022-01-01');

在上面的示例中，我们通过调用datepicker方法，并传入setDate方法所需的参数，来设置日期选择器的日期为2022年1月1日。

5. 示例和演示

通过以上的介绍，我们已经了解了如何使用Bootstrap Datepicker。现在，让我们通过一个完整的示例来演示其功能。

以下是一个完整的HTML示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker.min.css">
  <title>Bootstrap Datepicker Example</title>
</head>
<body>
  <form>
    <div class="form-group">
      <label for="datepicker">选择日期：</label>
      <input type="text" class="form-control" id="datepicker" placeholder="点击选择日期">
    </div>
  </form>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script>

  <script>
     $(document).ready(function() {$ ('#datepicker').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
        todayHighlight: true
      });
    });
  </script>
</body>
</html>

在这个示例中，我们创建了一个表单，并使用Bootstrap Datepicker插件为其中的文本输入框添加了日期选择功能。我们还配置了日期的显示格式为yyyy-mm-dd，并将选择日期后自动关闭日期选择器，并突出显示当前日期。