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.