jquery-ui-timepicker-addon 是一个 jQuery UI 时间选择器的扩展插件，它允许用户以不同的时间格式选择日期和时间。这个插件可以很方便地连接到你的前端项目中，并且能够提供非常好的用户体验，本文将介绍如何使用这个 npm 包。
安装
在安装之前，请确认已经安装了 jQuery UI ，如果没有请在你的项目目录下通过 npm 进行安装：
npm install jquery-ui --save
然后，可以通过以下命令安装 jquery-ui-timepicker-addon：
npm install jquery-ui-timepicker-addon --save
引入
在 html 文件中引入样式和脚本文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
用法
HTML
在 HTML 表单中添加 input 元素，并指定其 ID：
<label for="datepicker">选择日期：</label> <input type="text" id="datepicker">
JavaScript
在 JavaScript 文件中编写以下代码：
-- -------------------- ---- -------
------------ -
---------------------------------
----------- -----------
----------- -----------
----------- -----
--------- --
----------- ---
----------- --
---
---这里的 #datepicker 是我们在 HTML 中定义的 ID，使用 jQuery 的选择器来选取该元素进行初始化。datetimepicker 是 jquery-ui-timepicker-addon 插件提供的方法，它接受一个对象作为参数，包含各种配置选项。
配置选项
jquery-ui-timepicker-addon 插件提供了许多配置选项，下面是一些常用的选项：
- dateFormat：指定日期格式，默认值为 mm/dd/yy。
- timeFormat：指定时间格式，默认值为 hh:mm tt。
- showSecond：是否显示秒钟，默认为 false。
- stepHour：小时之间的跨度，默认为 1。
- stepMinute：分钟之间的跨度，默认为 1。
- stepSecond：秒钟之间的跨度，默认为 1。
更多配置选项请参考官方文档。
示例代码
下面是一个完整的示例代码，展示了如何使用 jquery-ui-timepicker-addon 插件完成日期与时间的选择：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------------------- ------------
----- ---------------- --------------------------------------------------------------------------------
----- ---------------- ------------------------------------------------------------------------------------------------------------------
------- -----------------------------------------------------------
------- ------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------------------------------------
-------
------
------ ------------------------------
------ ----------- ----------------
--------
------------ -
---------------------------------
----------- -----------
----------- -----------
----------- -----
--------- --
----------- ---
----------- --
---
---
---------
-------
-------总结
jquery
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34048