Element Plus 日期选择器 开始时间和结束时间交互

​

         有些场景用element日期选择器的时候我们不用它自带的选择一段时间，而是需要两个选择器，这时候就需要两个时间之间的交互了，开始时间不能在结束时间后，结束时间不能在开始时间之后。

        这次我来分享一下我的做法：

        HTML：

 <el-date-picker style="width: 9rem"
                        v-model="form.startTime"
                        type="date"
                        :disabled-date="disabledDateStart"
                        placeholder="选择日期" />
        -
        <el-date-picker style="width: 9rem"
                        v-model="form.endTime"
                        type="date"
                        :disabled-date="disabledDate"
                        placeholder="选择日期" />

        Js：

// 设置结束时间在开始时间之后
const disabledDate = (time) => {
  return time < form.value.startTime
}
// 设置开始时间在结束时间之前
const disabledDateStart = (time) => {
//注意这要加一个判断不然没选结束时间的时候开始时间也全部不能选择
  if (form.value.endTime) {
    return time > form.value.endTime
  }
}

        效果图：

         设置结束时间在开始时间之后

​

设置开始时间在结束时间之前

​

​