vue利用element-ui的date日期选择器实现结束时间不

image.png
image.png
image.png

<el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="开始时间">
        <el-date-picker v-model="form.startTime" size="small" format="yyyy-MM-dd" style="width:350px;" :picker-options="pickerOptionsStart"
          value-format="yyyy-MM-dd" type="date" placeholder="选择开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker v-model="form.endTime" :disabled="form.startTime==null" size="small" format="yyyy-MM-dd" style="width:350px;"
          :picker-options="pickerOptionsEnd" value-format="yyyy-MM-dd" type="date" placeholder="选择结束时间">
        </el-date-picker>
      </el-form-item>
</el-form>

data() {
    return {
      form: {
        startTime: null,
        endTime: null
      },
      pickerOptionsStart: {
        disabledDate: time => {
          let endDateVal = this.form.endTime;
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime();
          } else {
            return time.getTime() < Date.now() - 8.64e7;
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          let beginDateVal = this.form.startTime;
          if (beginDateVal) {
            return (time.getTime() < new Date(beginDateVal).getTime()
            )
          } else {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
      }
    }
  },
 watch: {
    'form.startTime'() {
      if (this.form.startTime == null) {
        this.form.endTime = null
      }
    }
  }