element时间组件限制选择日期范围

时间组件主要配置:picker-options事件,限制选择范围

1template

//prop可配合rule验证 prop="xx"
<el-form-item  style="width: 100%"  label="时间" >
        <el-date-picker
        class="selectdata"
        :popper-append-to-body="false"
        v-model="time"
        type="datetime"
        :size="'mini'"
        :clearable="true"
        placeholder="选择时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        :picker-options="pickerOptionsStart"
      >
      </el-date-picker>
      <i class="line">一</i>
      <el-date-picker
        class="selectdata"
        :popper-append-to-body="false"
        v-model="time2"
        type="datetime"
        :size="'mini'"
        :clearable="true"
        placeholder="选择时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        :picker-options="pickerOptionsEnd"
      >
      </el-date-picker>
      </el-form-item>

2script

//data
data() {
  return {
   pickerOptionsStart: {
        disabledDate: (time) => {
          let endRepairDateVal = this..time2;
          if (endRepairDateVal) {
            return time.getTime() > new Date(endRepairDateVal).getTime();
          }
        },
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          let beginDateVal = this..time;
          if (beginDateVal) {
            return time.getTime() < new Date(beginDateVal).getTime();
          }
        },
      },
  time1,
  time2，

 }
}
...