介绍
@dhau/vuejs-datepicker 是一个基于 Vue.js 的日期选择器组件，它支持选择单个日期、范围日期、时间和日期时间选择。
安装
在使用之前需要先安装此组件，可以通过 npm 进行安装：
npm install @dhau/vuejs-datepicker --save
使用
全局引入
在入口文件中引入并注册组件：
// main.js
import Vue from 'vue';
import DatePicker from '@dhau/vuejs-datepicker';
Vue.component('DatePicker', DatePicker);然后在需要使用的组件中直接使用即可：
-- -------------------- ---- -------
----------
-----
----------- ----------------
------
-----------
--------
------ ------- -
------ -
------ -
----- ----
--
-
--
---------局部引入
在需要使用的组件中引入并注册组件：
-- -------------------- ---- -------
----------
-----
----------- ----------------
------
-----------
--------
------ ---------- ---- -------------------------
------ ------- -
----------- -
----------
--
------ -
------ -
----- ----
--
-
--
---------API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 绑定值，可传入 Date、String 或者 null |
Date/String |
null |
| type | 选择器类型，可选值为 date、datetime、time |
String |
date |
| format | 显示在输入框中的日期格式 | String |
'yyyy-MM-dd' |
| placeholder | 占位文本 | String |
'请选择日期' |
| disabled | 是否禁用 | Boolean |
false |
| clearable | 是否可清空 | Boolean |
true |
| readonly | 是否只读 | Boolean |
false |
| editable | 是否可编辑 | Boolean |
false |
| input-class | 输入框类名 | String |
- |
| popper-class | 弹出框类名 | String |
- |
| width | 组件宽度 | Number |
- |
| zIndex | 弹出菜单的 z-index | Number |
2000 |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| input | 在 input 框中输入时触发 | event: KeyboardEvent |
| change | 选中日期时触发 | value: Date/String |
示例代码
选择单个日期
-- -------------------- ---- -------
----------
----------- -------------- ----------- ---------------------
-----------
--------
------ ------- -
------ -
------ -
----- ----
--
-
--
---------选择时间
-- -------------------- ---- -------
----------
----------- -------------- ----------- ---------------------
-----------
--------
------ ------- -
------ -
------ -
----- ----
--
-
--
---------选择日期和时间
-- -------------------- ---- -------
----------
----------- ------------------ --------------- ------------------------
-----------
--------
------ ------- -
------ -
------ -
--------- ----
--
-
--
---------禁用和只读状态
-- -------------------- ---- -------
----------
-----
----------- --------------- ----------- ------------------ ------------------
----------- --------------- ----------- ------------------ ------------------
------
-----------
--------
------ ------- -
------ -
------ -
------ -----
------ --- ------
--
-
--
---------可清空
-- -------------------- ---- -------
----------
----------- -------------- ----------- --------- ---------------------
-----------
--------
------ ------- -
------ -
------ -
----- ----
--
-
--
---------自定义日期格式和输入框样式
-- -------------------- ---- -------
----------
-----
----------- -------------- ----------- ------------------- ------------------- ------------------------
------------ ---- --------
------
-----------
-------
--------- -
-------------- ----
------- --- ----- --------
-------- ----
---------- -----
-
--------
--------
------ ------- -
------ -
------ -
----- ----
--
-
--
---------总结
@dhau/vuejs-datepicker 为我们提供了一个可定制化的日期选择器组件，通过对组件 API 的学习和使用，我们可以方便地实现各种日期选择功能，节省开发时间，并且大幅提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673e0fb81d47349e53d32
