当我们需要在前端页面中提供时间选择器功能时，@beisen/time-picker 包可以帮助我们快速实现。本文将介绍该包的使用方法及相关注意事项。
安装
通过 npm 安装 @beisen/time-picker：
npm install @beisen/time-picker --save
引入
在需要使用时间选择器的页面中引入该包：
import TimePicker from "@beisen/time-picker"; import "@beisen/time-picker/dist/style.css";
基本使用
在页面中添加一个 input 元素作为时间选择器的触发元素：
<input type="text" id="timepicker">
在 JavaScript 中初始化时间选择器：
const timePicker = new TimePicker({
container: "#timepicker",
themeColor: "#0078d7",
onSelect: (time) => {
console.log("selected time: ", time);
},
});其中，container 属性值为需要添加时间选择器的元素的 CSS 选择器，themeColor 属性用于设置选择器的主题色，onSelect 属性指定选取时间后的回调函数。
高级使用
除了基本使用中的属性外，@beisen/time-picker 还提供了其他的配置项：
type：时间选择器的类型，默认为 "time"，可选 "date"、"month"、"datetime" 等；timeRange：时间区间，默认为 "0:00 - 23:59"；disabledTime：禁用特定时间段的函数，返回值为数组，数组元素为格式为 "hh:mm" 的字符串；format：选中时间的输出格式，使用 moment.js 的格式化方式，如 "HH:mm:ss"；closeOnSelect：是否在选取时间后关闭选择器，默认为 true。
以下是高级使用的示例代码：
-- -------------------- ---- -------
----- ---------- - --- ------------
---------- --------------
----- -----------
---------- ----- - -------
------------- ------ -- -
----- ---------------- - --------- ---------
------ -------------------------------------- -- -------------------------- --- ----
--
------- ----------- ----------
-------------- ------
----------- ----------
--------- ------ -- -
--------------------- ----- -- ------
--
---结语
本文介绍了 @beisen/time-picker 的安装、引入及基本使用和高级使用。在实际项目中，可以根据具体需求使用相应的配置项来自定义时间选择器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedabe6b5cbfe1ea06108c7