timedropper 是一个基于 jQuery 的时间选择器插件，可用于网页中的时间输入，提供了多种选项和事件处理函数。
安装
使用 npm 安装：
--- ------- -----------
或者在 HTML 文件中添加以下脚本和样式链接：
----- ---------------- ------------------------------------------------------------------------- ------- --------------------------------------------------------
使用
初始化
在页面中准备一个 input 元素，并在 JavaScript 中初始化 timedropper：
------ ----------- ---------------- -------- ------------------------------- ---------
这将在 input 元素旁边添加一个下拉菜单，可以通过点击 input 元素来弹出并选择时间。
选项
timedropper 提供了多种选项，可以在初始化时设置。例如：
------------------------------ ------- -------- ---------- ------ --------------- ----- ---
其中常用的选项包括：
- format：时间格式，默认为
'hh:mm a'（12 小时制），也可以设置为'HH:mm'（24 小时制）等其他格式。 - meridians：是否显示上午/下午标记，默认为
true。 - setCurrentTime：是否在初始化时使用当前时间作为默认值，默认为
true。
更多选项请参考官方文档。
事件处理
timedropper 提供了多种事件处理函数，可以在初始化时设置。例如：
------------------------------
--------------- ---------
-------- ---------- -
------------------- - ------------
-
---其中常用的事件包括：
- init_animation：初始化动画效果，默认为
'fadeIn'。 - onOpen：下拉菜单打开时的回调函数。
- onClose：下拉菜单关闭时的回调函数。
- onChange：选中时间时的回调函数。
更多事件请参考官方文档。
示例代码
下面是一个完整的示例代码：
--------- -----
------
------
----- ----------------
------------------ ----------
----- ---------------- -------------------------------------------------------------------------
-------
------
------ ----------- ----------------
------- ---------------------------------------------------
------- --------------------------------------------------------
--------
------------------------------
------- --------
---------- ------
--------------- ------
--------------- ---------
-------- ---------- -
------------------- - ------------
-
---
---------
-------
-------在实际项目中，应根据需要调整选项和事件处理函数。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/35529