时间组件el-date-picker的校验

308 阅读1分钟

1.有时候我们会遇到时间组件的校验问题,比如说开始时间不得大于结束时间,结束时间不得小于开始时间。


   <el-date-picker v-if="type != 'check'"
                                v-model="dataForm.startDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期"
                                class="itemWidth"
                                :picker-options="pickerBeginDateBefore"/>
                                
         <el-date-picker v-if="type != 'check'"
                                v-model="dataForm.endDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期"
                                class="itemWidth"
                                :picker-options="pickerBeginDateAfter"/>



 computed:{
             // 开始时间
    pickerBeginDateBefore () {
      return {
        disabledDate: (time) => {
          let beginDateVal = new Date(this.dataForm.endDate);
          if (beginDateVal) {
            return time.getTime() > beginDateVal.getTime();
          } else {
            return false;
          }
        }
      }
    },
    // 结束时间
    pickerBeginDateAfter () {
      return {
        disabledDate: (time) => {
          let beginDateVal = new Date(this.dataForm.startDate);
          if (beginDateVal) {
            return time.getTime() < beginDateVal.getTime();
          } else {
            return false
          }
        }
      }
    },
 }