timedropper 是一个基于 jQuery 的时间选择器插件，可用于网页中的时间输入，提供了多种选项和事件处理函数。
安装
使用 npm 安装：
npm install timedropper
或者在 HTML 文件中添加以下脚本和样式链接：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/timedropper/dist/timedropper.min.css"> <script src="https://cdn.jsdelivr.net/npm/timedropper"></script>
使用
初始化
在页面中准备一个 input 元素，并在 JavaScript 中初始化 timedropper：
<input type="text" id="timepicker">
<script>
$('#timepicker').timeDropper();
</script>这将在 input 元素旁边添加一个下拉菜单，可以通过点击 input 元素来弹出并选择时间。
选项
timedropper 提供了多种选项，可以在初始化时设置。例如：
$('#timepicker').timeDropper({
format: 'HH:mm',
meridians: false,
setCurrentTime: false
});其中常用的选项包括：
- format：时间格式，默认为
'hh:mm a'（12 小时制），也可以设置为'HH:mm'（24 小时制）等其他格式。 - meridians：是否显示上午/下午标记，默认为
true。 - setCurrentTime：是否在初始化时使用当前时间作为默认值，默认为
true。
更多选项请参考官方文档。
事件处理
timedropper 提供了多种事件处理函数，可以在初始化时设置。例如：
$('#timepicker').timeDropper({
init_animation: 'fadeIn',
onClose: function() {
console.log('选择时间：' + this.value);
}
});其中常用的事件包括：
- init_animation：初始化动画效果，默认为
'fadeIn'。 - onOpen：下拉菜单打开时的回调函数。
- onClose：下拉菜单关闭时的回调函数。
- onChange：选中时间时的回调函数。
更多事件请参考官方文档。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------ ----------
----- ---------------- -------------------------------------------------------------------------
-------
------
------ ----------- ----------------
------- ---------------------------------------------------
------- --------------------------------------------------------
--------
------------------------------
------- --------
---------- ------
--------------- ------
--------------- ---------
-------- ---------- -
------------------- - ------------
-
---
---------
-------
-------在实际项目中，应根据需要调整选项和事件处理函数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35529