• 周二. 3月 28th, 2023

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

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

admin

11月 28, 2021
<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),
      };
    },

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注