两个时间控件 - 时间选择范围互相联动

127 阅读1分钟

两个时间控件,当我们每个时间控件都未选择时间时,则都可以随意选择一天。

image.png

image.png

但是当我们开工时间选择了某一天

image.png

我们的竣工时间则必须要大于开工时间,反之亦然。

image.png

`

        <el-form-item label="开工时间:" label-width="90px">
          <el-date-picker
            v-model="building.startTime"
            type="date"
            :picker-options="pickerOptionsStart"
            placeholder="请选择开工时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="竣工时间:" label-width="90px">
          <el-date-picker
            v-model="building.endTime"
            type="date"
            :picker-options="pickerOptionsEndTime"
            placeholder="请选择开工时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>`
      
      
      pickerOptionsStart: {
    disabledDate: (time) => {
      if (this.building.endTime) {
        return time.getTime() > this.building.endTime;
      }
    },
  },
  pickerOptionsEndTime: {
    disabledDate: (time) => {
        return time.getTime() < this.building.startTime;
    },
  },