element-plus 自动识别两个 el-date-picker日期选择器大小,使开始日期小于结束日期

需求描述:

element-plus + vue3 ,两个单独的日期选择器,如果开始日期比结束日期大,就将其互换

在这里插入图片描述

代码实现:

<el-form-item label="时间:">
  <el-date-picker
    v-model="startTime"
    type="date"
    clearable
    :disabled-date="disabledDate"
    placeholder="选择开始日期"
    value-format="YYYY-MM-DD"
    @change="dateChangeEvent"
  />
</el-form-item>
<el-form-item label="-">
  <el-date-picker
    v-model="endTime"
    type="date"
    placeholder="选择结束日期"
    :disabled-date="disabledDate"
    value-format="YYYY-MM-DD"
    @change="dateChangeEvent"
  />
</el-form-item>
const formData = reactive({
  startTime: '',
  endTime: '',
})
const dateChangeEvent = () => {
 if (formData.startTime && formData.endTime) {
    if (
      new Date(formData.startTime).getTime() -
      new Date(formData.endTime).getTime() >
      0
    ) {
      // 证明开始时间比结束时间大,需要把两个互相换一下
      ;[formData.startTime, formData.endTime] = [
        formData.endTime,
        formData.startTime,
      ]
      console.log(formData.startTime, formData.endTime)
    }
  }
}

猜你喜欢

转载自blog.csdn.net/xiamoziqian/article/details/129437202