eonasdan-bootstrap-datetimepicker 是一款基于 Bootstrap 的日期时间选择器插件，可以方便地实现日期时间的选择和格式化。本文将详细介绍该插件的使用方法及示例代码。
安装
首先需要安装 Node.js 和 npm，然后在命令行中输入以下命令进行安装：
npm install eonasdan-bootstrap-datetimepicker
引入样式和脚本
在 HTML 文件中引入样式和脚本：
-- -------------------- ---- ------- ---- -- --------- -- --- ----- ---------------- ----------------------------------------------------------------------------- ---- -- -------------- -- --- ----- ---------------- ------------------------------------------------------------------------------------------------- ---- -- ------ - --------- -- --- ------- ----------------------------------------------------------- ------- ------------------------------------------------------------------------------------- ---- -- -------------- -- --- ------- -------------------------------------------------------------------------------------------------------
初始化
在 JavaScript 中初始化 datetimepicker：
// 选取元素
var $datetimepicker = $('#datetimepicker');
// 初始化 datetimepicker
$datetimepicker.datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss',
sideBySide: true
});上面的代码中，$datetimepicker 为选取的元素，可以是一个输入框或一个按钮等。datetimepicker() 方法用于初始化 datetimepicker，其中 format 选项指定日期时间格式，sideBySide 选项指定是否同时显示日期和时间。
方法和事件
datetimepicker 提供了一些方法和事件，方便对日期时间进行操作。以下是一些常用的方法和事件：
方法
date()：获取或设置当前日期时间。minDate(date)：获取或设置最小日期时间。maxDate(date)：获取或设置最大日期时间。
事件
dp.change：当日期时间改变时触发。dp.show：当 datetimepicker 显示时触发。dp.hide：当 datetimepicker 隐藏时触发。
下面是一些示例代码：
-- -------------------- ---- -------
-- --------
--- ------- - ----------------------------------------------
-------------------------------------- ------------
-- --------
-------------------------------------------------------------
-- ----------
------------------------------- --------------- -
----------------------------------------- ------------
---
-- - -------------- -----
----------------------------- ---------- -
--------------------------- ------
---
-- - -------------- -----
----------------------------- ---------- -
--------------------------- ------
---总结
本文介绍了 npm 包 eonasdan-bootstrap-datetimepicker 的使用方法，包括安装、引入样式和脚本、初始化、方法和事件等。希望读者可以通过本文深入学习该插件，并在实际项目中应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32792
