antdvue日期时间选择器混合使用（默认时分秒为00:00:00）

前提：下载并引入moment

npm install moment

import  moment  from "moment"

 

插件编写：

    <a-date-picker
       style="width:100%"
       :getCalendarContainer="(triggerNode) => triggerNode.parentNode"
       format="YYYY-MM-DD HH:mm:ss" 
       v-model="model.meetingTimeEnd"
       :showTime="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
       :disabledDate="disabledDate" 
       :disabledDateTime="disabledDateTime"
       placeholder="请选择时间" 
       @ok="onOk" 
    />

 

methods：

  // 时间控件
      moment,
  // 点击确定按钮后的回调
      onOk(value) {
            this.model.meetingTimeBegin = value.format('YYYY-MM-DD HH:mm:ss')
        },
       
       range(start, end) {
            const result = []
            for (let i = start; i < end; i++) {
                result.push(i)
            }
            return result
        },

    // 今天之前的日期不可选（不包括今天）
        disabledDate(date) {
            // return date < moment(moment(new Date()).format("YYYY-MM-DD HH:mm:ss")); //返回今天以后的日期
            return date < moment(moment(new Date()).format("YYYY-MM-DD "));
        },

    //不可选择的时间
        disabledDateTime() {
           return {
             disabledHours: () => this.range(0, 24).splice(4, 20),
             disabledMinutes: () => this.range(30, 60),
             disabledSeconds: () => [55, 56]
            }
        },

 

效果展示：

 

    -->      -->