前言
在前端开发中，时间选择器是一个常用的组件。虽然随着时间选择器多种多样的出现，我们可以使用一些UI工具库来快速构建，但是在一些独立的项目中，可能并不需要引入整个UI库，这时候就需要用到npm包new-time-picker。
npm包new-time-picker是一个简单的时间选择器组件，只需三行js代码，即可在项目中快速部署。
安装
使用npm安装
npm install new-time-picker
或使用yarn安装
yarn add new-time-picker
特性
npm包new-time-picker有以下特性：
- 简单易用
- 支持自定义格式
- 可限制时间范围
- 可拆分成不同的输入框
使用方法
首先，在HTML文件中引入new-time-picker。
<!-- 引入CSS文件 --> <link href="https://unpkg.com/new-time-picker/dist/index.css" rel="stylesheet"/> <!-- 引入JS文件 --> <script src="https://unpkg.com/new-time-picker/dist/index.js"></script>
在JS文件中，创建一个newTimePicker实例，然后将其渲染在指定的dom节点中。
import newTimePicker from 'new-time-picker'
const timePicker = new newTimePicker({
el: '#time-picker',
format: 'hh:mm',
min: '08:00',
max: '18:00'
})这里创建了一个名为timePicker的实例，它会渲染在id为time-picker的dom节点中。时间格式为hh:mm，限制时间范围为08:00至18:00。
参数说明
new-time-picker支持以下参数。
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| el | string | - | 渲染new-time-picker组件的dom节点id |
| format | string | hh:mm | 时间格式，支持yyyy、MM、dd、hh和mm |
| min | string | - | 允许选择的最小时间 |
| max | string | - | 允许选择的最大时间 |
| divider | string | : | 用于分隔小时和分钟的字符，默认为冒号 |
事件
new-time-picker提供了以下事件。
| 事件名 | 回调参数 | 说明 |
|---|---|---|
| change | date | 当选择的时间发生改变时触发 |
| error | message | 当选择的时间不合法时触发 |
| destroy | - | 当newTimePicker实例被销毁时触发 |
| show | - | 当newTimePicker组件显示时触发 |
| hide | - | 当newTimePicker组件隐藏时触发 |
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------------------
----- ------------------------------------------------------- ------------------
-------
------
---- -----------------------
------- ---------------------------------------------------------------
--------
----- ---------- - --- ---------------
--- ---------------
------- --------
---- --------
---- -------
--
-----------------
---------
-------
-------结语
npm包new-time-picker是一个非常简单易用的时间选择器组件，在项目中能够帮助我们快速构建时间选择器。希望本教程对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005626281e8991b448dfa85