element ui实现结束时间大于开始时间

结束时间大于开始时间

    <p>合同开始时间:</p>
    <div class="contract-elInput">
      <el-date-picker
            v-model="startTime"
            type="date"
            placeholder="选择开始时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            center
            :editable="false"
            :clearable="false"
            :picker-options="pickerBeginDateBefore"
            >
       </el-date-picker>
    </div>

    <p>合同结束时间:</p>
    <div class="contract-elInput">
       <el-date-picker
          v-model="endTime"
          type="date"
          placeholder="选择结束时间"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          center
          :editable="false"
          :clearable="false"
          :picker-options="pickerBeginDateAfter"
          >
      </el-date-picker>
    </div>

写在vue的computed (computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化) 中，当选择开始时间时大于当前时间禁止选择，选择结束时间时根据开始时间判断，开始时间之后并且小于当前时间不能选择。如下所示：

  computed: {
            // 结束时间大于开始时间
            pickerBeginDateBefore() {
                return {
                    disabledDate: time => {
                        let endDateVal = this.endTime;
                        if (endDateVal) {
                            return time.getTime() > new Date(endDateVal).getTime();
                        }else {
                            return time.getTime() > Date.now();   // 大于当前时间禁止选择
                        }
                    }
                }
            },
            pickerBeginDateAfter() {
                return {
                    disabledDate: time => {
                        let beginDateVal = this.startTime;
                        if (beginDateVal) {
                            return time.getTime() < Date.now() - 8.64e7 || time.getTime() < new Date(beginDateVal).getTime() - 8.64e7;
                        }
                    }
                }
            },
}