在前端开发中，日期时间选择器是一个常见的需求。bootstrap-datetimepicker 是一个基于 Bootstrap 4 的日期时间选择器，提供了丰富的配置选项和多种事件回调函数。
安装
使用 npm 可以很方便地安装 bootstrap-datetimepicker，命令如下：
--- ------- ------------------------ ------
引入
- 在 HTML 文件中引入必要的 CSS 和 JS 文件：
----- ---------------- --------------------------------------------------------- ----- ---------------- ------------------------------------------------------------------------------------ ------- ------------------------------------------------------ ------- ----------------------------------------------------- ------- --------------------------------------------------------------- ------- ----------------------------------------------------------------------------------------------
- 在 JavaScript 代码中初始化 datetimepicker：
---------- -- - -------------------------------------- ---
- 在 HTML 文件中添加 datetimepicker 的输入框：
---- ------------------ ----- --------------------
------ ----------- ---------------------
----- --------------------------
-- --------- -----------------
-------
------配置选项
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