如何使用 datetimepicker 库设置 Bootstrap Timepicker？

Bootstrap Timepicker 是一个基于 Bootstrap 的时间选择器插件。它可以方便地在表单输入框中选择时间。Datetimepicker 是一个更加全面的时间选择器库，它包含多种选择器类型，并且可以支持多语言。在本教程中，我们将学习如何使用 datetimepicker 库设置 Bootstrap Timepicker。

步骤 1: 安装 datetimepicker 库

Datetimepicker 库可以通过以下两种方式安装：

• 通过 NPM 安装：npm install datetimepicker
• 通过引用 CDN：<script src="https://cdn.jsdelivr.net/npm/datetimepicker/build/jquery.datetimepicker.full.min.js"></script>

步骤 2: 引用 Bootstrap 和 datetimepicker 库

在 HTML 文件中引用 Bootstrap 和 datetimepicker 库的 CSS 和 JavaScript 文件。你可以使用以下链接来从 CDN 引用这两个库。

<!-- 引用 Bootstrap -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

<!-- 引用 datetimepicker -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/datetimepicker/build/jquery.datetimepicker.min.css">
<script src="https://cdn.jsdelivr.net/npm/datetimepicker/build/jquery.datetimepicker.full.min.js"></script>

步骤 3: 设置 Bootstrap Timepicker

首先，你需要添加一个文本框来显示时间选择器。稍后，我们将在该元素上初始化 datetimepicker 插件。在文本框中，需要添加 data-target="#datetimepicker" 属性，这是 datetimepicker 库的一个限制。

<input type="text" class="form-control" id="datetimepicker" data-target="#datetimepicker" />

接下来，需要编写一些 JavaScript 代码来初始化 datetimepicker 插件。以下是一些常用选项的示例：

$('#datetimepicker').datetimepicker({
  format: 'Y-m-d H:i', // 日期格式
  value: new Date(), // 默认值
  timepicker: true, // 是否显示时间选择器
  datepicker: true, // 是否显示日期选择器
  lang: 'zh', // 选择器语言
  step: 30, // 时间间隔，单位为分钟
  minDate: new Date(), // 最小日期
  maxDate: '+1970/01/31', // 最大日期
  theme: 'dark', // 主题
  onChangeDateTime: function(dp, $input) { // 日期时间改变事件
    console.log('日期时间改变为：' + $input.val());
  }
});

步骤 4: 使用 Bootstrap Timepicker

你可以在 datetimepicker 初始化后，通过点击输入框来唤出时间和/或日期选择器。如果你希望在代码中使用 datetimepicker 的时间值，你可以通过以下方法获得：

var datetime = $('#datetimepicker').datetimepicker('getValue');
console.log('datetime: ', datetime);

以上就是如何使用 datetimepicker 库设置 Bootstrap Timepicker 的完整教程。希望这篇文章对你有所帮助。