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

vivk2017

已于 2023-10-18 08:56:44 修改

阅读量784

点赞数

分类专栏： Vue 文章标签： vue elementUI

于 2023-10-18 08:55:37 首次发布

本文链接：https://blog.csdn.net/m0_38109616/article/details/133898076

版权

Vue 专栏收录该内容

38 篇文章 0 订阅 ¥199.90 ¥99.00

订阅专栏

超级会员免费看

<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("结束时间不能小于开始时间！");
      }
    }
  }
}