在前端开发中，时间选择器是非常常见的组件之一。而 npm 包 clockpicker 就是一个轻量级、易用性高的时间选择器组件。本文将详细介绍如何使用该组件，并附有示例代码。
安装
可以通过 npm 安装该组件：
npm install clockpicker
也可以通过 CDN 直接引入：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/clockpicker/dist/bootstrap-clockpicker.min.css"> <script src="https://cdn.jsdelivr.net/npm/clockpicker/dist/bootstrap-clockpicker.min.js"></script>
基本用法
HTML
<input type="text" class="form-control" id="timepicker">
JavaScript
$(function() {
$('#timepicker').clockpicker({
donetext: '完成',
afterDone: function() {
console.log('选择后执行的回调函数');
}
});
});参数列表
default: 默认选中的时间，默认值为now。placement: 时间选择器的位置，可选值为top,bottom,left,right，默认值为bottom。align: 对齐方式，可选值为left,right,center，默认值为left。twelvehour: 是否启用12小时制，可选值为true,false，默认值为false。donetext: 确定按钮的文本，默认值为完成。autoclose: 是否自动关闭时间选择器，可选值为true,false，默认值为true。vibrate: 是否启用震动效果，可选值为true,false，默认值为true。fromnow: 相对当前时间的偏移量（单位为分钟），默认值为0。minuteStep: 分钟数的步进值，默认值为5。secondStep: 秒数的步进值，默认值为1。snapToStep: 是否根据步进值进行对齐，可选值为true,false，默认值为true。twentyfourhour: 是否启用24小时制，可选值为true,false，默认值为true。afterDone: 选择后执行的回调函数。
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------------
----- ---------------- -----------------------------------------------------------------------------------
-------
------
---- ------------------
---- ------------
---- -----------------
-------------
------ ----------- -------------------- ----------------
------
---- -----------------
--------------
------ ----------- -------------------- -----------------
------
------
------
------- ----------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------
--------
------------ -
------------------------------
--------- -----
---------- ---------- -
--------------------------
-
---
-------------------------------
-------- --------
---------- -------
------ ---------
----------- -----
--------- -----
---------- ------
-------- ------
-------- ---
----------- ---
----------- --
----------- ------
--------------- ------
---------- ---------- -
--------------------------
-
---
---
---------
-------
-------结论
npm
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34429