element form校验两个时间选择框的范围(开始时间不能大于结束时间)

488 阅读1分钟
<el-form-item label="起借日期" prop="borrowDate" label-width="70px">
  <el-date-picker
    value-format="yyyy-MM-dd"
    format="yyyy-MM-dd"
    v-model="borrowDate"
    type="date"
    @change="changeData(true)"
    placeholder="选择日期"
  >
  </el-date-picker>
</el-form-item>
<el-form-item label="要求归还日期" prop="returnDate">
  <el-date-picker
    value-format="yyyy-MM-dd"
    format="yyyy-MM-dd"
    v-model="returnDate"
    type="date"
    @change="changeData(false)"
    placeholder="选择日期"
  >
  </el-date-picker>
</el-form-item>
// 判断 开始时间 结束时间
changeData(flag) {
  if (flag) {
    if (this.returnDate) {
      if (this.borrowDate > this.returnDate) {
        this.borrowDate = null;
        this.$message.error("开始时间不能大于结束时间!");
      }
    }
  } else {
    if (this.borrowDate) {
      if (this.borrowDate > this.returnDate) {
        this.returnDate = null;
        this.$message.error("结束时间不能小于开始时间!");
      }
    }
  }
}