antVue range-picker 限制当前时间之前的时间不可选择

时间:2021-07-15
本文章向大家介绍antVue range-picker 限制当前时间之前的时间不可选择,主要包括antVue range-picker 限制当前时间之前的时间不可选择使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<a-range-picker
                        :format="dateFormat"
                        size="small"
                        :showToday="true"
                        class="org-rang-Time"
                        allowClear
                        :show-time="{hideDisabledOptions:true}"
                        :disabled-date="disabledDate"
                        :disabled-time="disabledRangeTime"
                        v-decorator="['orgStartEndTime',validatorRules.orgStartEndTime]"
                        :placeholder="['开始时间', '结束时间']"
                        @change="onTimeChange"/>

两个知识点:1.时间重置;2.时间限制

onTimeChange(value, dateString){//任务起止时间设置
         if(value.length>0){
           this.orgStartEndTime = value;
           this.beginTime = dateString[0];
           this.endTime  =dateString[1];
         }else{
          //  时间重置
           this.orgStartEndTime = moment([]).format('YYYY-MM-DD HH:mm:ss');
           this.beginTime ='';
           this.endTime  ='';
         }
      },
      range(start, end) {
        const result = [];
        for (let i = start; i < end; i++) {
          result.push(i);
        }
        return result;
      },
      disabledDate(current) {
      //  禁用当前时间之前的时间
        return current < moment().startOf('day');
      },
    disabledRangeTime(_, type) {
      if (type === 'start') {
        return {
          disabledHours: () => this.range(0, moment().hour()),
          disabledMinutes: () => this.range(0, moment().minute()),
          disabledSeconds: () => this.range(0, moment().second())
        };
      }
      return {
        // disabledHours: () => this.range(0, 60).splice(20, 4),
        // disabledMinutes: () => this.range(0, 30),
        // disabledSeconds: () => this.range(0, 60),
      };
    },

原文地址:https://www.cnblogs.com/changyuqing/p/15014763.html