el-date-picker设置选择的两个时间相差不能超过一个月
时间: 2023-02-11 15:01:48 浏览: 71
要在 el-date-picker 中设置两个选择的时间相差不能超过一个月,需要使用自定义验证规则。具体实现方法如下:
1.在 template 中设置日期范围验证规则,如下所示:
```
<el-date-picker v-model="startDate" :rules="[{ validator: validateStartDate, trigger: 'change' }]"></el-date-picker>
<el-date-picker v-model="endDate" :rules="[{ validator: validateEndDate, trigger: 'change' }]"></el-date-picker>
```
2.在 script 中定义验证函数 validateStartDate 和 validateEndDate,如下所示:
```
methods: {
validateStartDate(rule, value, callback) {
if (value && this.endDate) {
let startTime = new Date(value).getTime();
let endTime = new Date(this.endDate).getTime();
if (endTime - startTime > 30 * 24 * 60 * 60 * 1000) {
callback(new Error('选择的时间间隔不能超过一个月'));
} else {
callback();
}
} else {
callback();
}
},
validateEndDate(rule, value, callback) {
if (value && this.startDate) {
let startTime = new Date(this.startDate).getTime();
let endTime = new Date(value).getTime();
if (endTime - startTime > 30 * 24 * 60 * 60 * 1000) {
callback(new Error('选择的时间间隔不能超过一个月'));
} else {
callback();
}
} else {
callback();
}
}
}
```
这样,当用户在两个日期选择器中分别选择时间时,会自动根据验证规则进行验证,如果所选时间间隔超过一个月,则会显示错误消息。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![xlsm](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)