element UI 开始时间不能晚于结束时间

开始时间不能晚于结束时间

背景：

• 项目中有个需求是开始时间不能晚于结束时间，有段时间不接触element ui了，给忘记了，网 上找了很多案例，但是每一个是我想要的，于是自己操作一番，记下来方便以后借鉴。

效果：

这是写在页面显示的代码

 <!-- 起止日期时间 -->
      <label class="search-label">
        开始时间:
        <el-date-picker
          v-model="formSearch.startTime"
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="change_start_value"
        />
      </label>
      <label class="search-label">
        结束时间:
        <el-date-picker
          v-model="formSearch.endTime"
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="change_end_value"
        />
      </label>

这是写在methods里面的代码

// 起始时间不能晚于结束时间
    change_start_value(startTime) {
      const startDate = new Date(startTime)
      const endDate = new Date(this.formSearch.endTime)
      if (startDate.getTime() > endDate.getTime()) {
        this.$message({ message: '起始时间不能大于结束时间', type: 'error' })
        this.formSearch.startTime = this.formSearch.endTime
      }
    },
    change_end_value(endTime) {
      const startDate = new Date(this.formSearch.startTime)
      const endDate = new Date(endTime)
      if (endDate.getTime() < startDate.getTime()) {
        this.$message({ message: '结束时间不能小于起始时间', type: 'error' })
        this.formSearch.endTime = this.formSearch.startTime
      }
    }