vuetify-datetime
介绍
vuetify实现element的日期时间组件带校验
下载引入使用
npm i vuetify-datetime-all
import Time from 'vuetify-datetime-all'
import "vuetify-datetime-all/lib/vuetime.css";
Vue.use(Time)
<Time />
参数说明
<Time type="datetimerange"/>
// 时间点datetime或时间段datetimerange
<Time type="datetimerange" :defaultValue.sync="value"/>
// 默认时间 value可为"2022-02-02 00:00:00"也可为new Date()格式,datetimerange状态下传数组格式["2022-02-02 00:00:00","2022-02-08 00:00:00"]
<Time :defaultTime="['00:00:00','10:00:00']"/>
// 默认时间点 datetime传["00:00:00"]即可(placeholder也是["开始时间"])
<Time type="datetimerange" disabled/>
// readonly:只读; editable:主输入框是否可编辑;clearable:是否展示清空按钮;
<Time type="datetimerange" color="#ff0000"/>
// 按钮颜色
<Time type="datetimerange" rangeVal="至"/>
// 中间文字
<Time type="datetimerange" :height="80"/>
// 高
<Time type="datetimerange" :width="500"/>
// 宽
<Time type="datetimerange" :pickerOptions="pickerOptions"/>
// 快捷键内容如下
<Time type="datetimerange" @confirm="confirm"/>
// 确认按钮接收默认值时间
<Time type="datetimerange" :rules="rules" @confirm="confirm"/>
// 添加校验rules
rules:Array<(v:any)=> boolean | string> = [
(v:any) => !!v[0] || '请选择开始时间',
(v:any) => !!v[1] || '请选择结束时间',
]
或datetime
rules:Array<(v:any)=> boolean | string> = [ (v:any) => !!v || '请选择时间' ]
pickerOptions =
[{
text: '最近一周',
clickFn:(picker:any):void=>{
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.datatimeval = [start, end]
}
}, {
text: '最近一个月',
clickFn:(picker:any):void=>{
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.datatimeval = [start, end]
}
}, {
text: '最近三个月',
clickFn:(picker:any):void=>{
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.datatimeval = [start, end]
}
}]
// [{
// text: '今天',
// clickFn:(picker:any):void=>{
// picker.datatimeval = new Date()
// }
// }, {
// text: '昨天',
// clickFn:(picker:any):void=>{
// const date = new Date();
// date.setTime(date.getTime() - 3600 * 1000 * 24);
// picker.datatimeval = date
// }
// }, {
// text: '一周前',
// clickFn:(picker:any):void=>{
// const date = new Date();
// date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
// picker.datatimeval = date
// }
// }]
Customize configuration
See Configuration Reference.