Element 可选日期范围限制或检验（开始日期结束日期）

落日映苍穹つ 2022-10-18 12:53 195阅读 0赞

## 需求： ##

1.  选择起始日期后截止日期不能小于起始日期
2.  选择截止日期后起始日期不能大于截止日期

有两种实现方法：

1.  选择起始日期，起始日期之前的日期就不让你选择
    
    效果如下：
    
    ![5bca9e7d9d695396c3e2e2510792a670.gif][]
2.  选择起始日期，表单校验截止日期不能小于起始日期
    
    效果如下：
    
    ![b8ae6104559033743f55abe56438f1e6.gif][]

## 第一种情况：不让选 ##

*  首先不能使用 Element 中的 DatePicker 选择日期范围
 *  给 DatePicker 动态配置 pick-options 中的 disableDate 即可对可选日期进行限制

**注意：**

1.  如果加`value-format` 需要给日期格式中间加 `-`
2.  需要给 DatePicker 加 `type="date"`
3.  截止日期如果不能超过当前日期需要减一天（`24 * 3600 * 1000 = 8.64e7`）

<template>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="起始日期" prop="startDate">
          <el-date-picker v-model="form.startDate" value-format="yyyy-MM-dd" clearable type="date" placeholder="请选择起始日期" :picker-options="dateTimeStartFunc" />
        </el-form-item>
        <el-form-item label="截止日期" prop="stopDate">
          <el-date-picker v-model="form.stopDate" value-format="yyyy-MM-dd" clearable type="date" placeholder="请选择截止日期" :picker-options="dateTimeEndFunc" />
        </el-form-item>
      </el-form>
    </template>
    
    <script> export default { data() { return { form: { startDate: '', stopDate: '' }, dateTimeStartFunc: { disabledDate: time => { if (this.form.stopDate) { return time.getTime() > new Date(this.form.stopDate).getTime() } } }, dateTimeEndFunc: { disabledDate: time => { if (this.form.startDate) { return time.getTime() < new Date(this.form.startDate).getTime() - 8.64e7 } } } } } } </script>

## 第二种情况：表单校验 ##

*  使用 DatePicker 的 validateField 来对部分表单字段进行校验，如下需动态校验 startDate 和 stopDate

**注意：**

1.  这里需要结合 watch 来使用，不然会出现`截止日期必须大于起始日期` 不会随着只改变起始日期的情况下消失
2.  这里可以把表单校验方法抽出去，以后后续修改

<template>
      <el-form ref="form" :model="form" label-width="100px" :rules="rules">
        <el-form-item label="起始日期" prop="startDate">
          <el-date-picker
            v-model="form.startDate"
            value-format="yyyy-MM-dd"
            clearable
            type="date"
            placeholder="请选择起始日期"
          />
        </el-form-item>
        <el-form-item label="截止日期" prop="stopDate">
          <el-date-picker
            v-model="form.stopDate"
            value-format="yyyy-MM-dd"
            clearable
            type="date"
            placeholder="请选择截止日期"
          />
        </el-form-item>
      </el-form>
    </template>
    
    <script>
    export default { 
      data() { 
        const checkEndTime = (rule, value, callback) => { 
          this.ValidatorEndTime(rule, value, callback, this.form.startDate)
        }
        return { 
          form: { 
            startDate: '',
            stopDate: ''
          },
          rules: { 
            startDate: [{  required: true, message: '请选择起始日期', trigger: 'change' }],
            stopDate: [{  required: true, validator: checkEndTime, trigger: 'change' }]
          }
        }
      },
      watch: { 
        'form.startDate'() { 
          this.validateReset(['startDate', 'stopDate'])
        },
        'form.stopDate'() { 
          this.validateReset(['startDate', 'stopDate'])
        }
      },
      methods: { 
        validateReset(arr) { 
          this.$refs['form'].validateField(arr)
        },
        ValidatorEndTime(rule, value, callback, start) { 
          if (!value) { 
            callback(new Error('请选择截止日期'))
          } else { 
            if (!start) { 
              callback(new Error('请选择起始日期！'))
            } else if (Date.parse(start) > Date.parse(value)) { 
              callback(new Error('截止日期必须大于起始日期！'))
            } else { 
              callback()
            }
          }
        }
      }
    }
    </script>

[5bca9e7d9d695396c3e2e2510792a670.gif]: /images/20221005/806772670b494f5fb5f64f611c953315.png
[b8ae6104559033743f55abe56438f1e6.gif]: /images/20221005/6917b98042f64188b9ff2828536b1c15.png