在前端开发中，日期时间选择器是一个常见的需求。bootstrap-datetimepicker 是一个基于 Bootstrap 4 的日期时间选择器，提供了丰富的配置选项和多种事件回调函数。
安装
使用 npm 可以很方便地安装 bootstrap-datetimepicker，命令如下：
npm install bootstrap-datetimepicker --save
引入
- 在 HTML 文件中引入必要的 CSS 和 JS 文件：
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="node_modules/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css"> <script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/moment/min/moment.min.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <script src="node_modules/bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
- 在 JavaScript 代码中初始化 datetimepicker：
$(function () {
$('#datetimepicker').datetimepicker();
});- 在 HTML 文件中添加 datetimepicker 的输入框：
<div class="input-group date" id="datetimepicker">
<input type="text" class="form-control">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
</div>配置选项
bootstrap-datetimepicker 提供了大量的配置选项，可以按需设置。以下是一些常用的选项及其说明：
- format：日期时间的格式，默认为
L。 - inline：是否以行内元素方式展示 datetimepicker，默认为 false。
- locale：语言，可选值有 en、zh-cn 等。
- minDate 和 maxDate：最小和最大日期时间。
- defaultDate：默认日期时间。
- useCurrent：是否默认选中当前日期时间。
以下是一些示例代码：
-- -------------------- ---- -------
---------- -- -
-------------------------------------
------- ----------- ----------
------- -----
------- --------
-------- -------------
-------- -------------
------------ ----------- -------
----------- -----
---
---事件回调函数
bootstrap-datetimepicker 提供了多个事件回调函数，可以在特定的时机执行自定义的代码逻辑。以下是一些常用的事件回调函数及其说明：
- show：datetimepicker 显示之前触发。
- hide：datetimepicker 隐藏之后触发。
- changeDate：当用户选择一个新的日期或者时间时触发。
- error：datetimepicker 出错时触发。
以下是一些示例代码：
-- -------------------- ---- -------
---------- -- -
-------------------------------------
------- ----------- ----------
------- -----
------- --------
-------- -------------
-------- -------------
------------ ----------- -------
----------- -----
--
----------------- -------- --- -
--------------------
--
------------ -------- --- -
---------------
---
---结论
以上是 bootstrap-datetimepicker 的使用教程，包括安装、引入、配置选项和事件回调函数等方面。希望本文能够对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32789