el-date-picker 实现禁止选择今日以后的日期,以及时间跨度不超过3天
时间: 2023-02-12 11:28:54 浏览: 94
可以在 el-date-picker 中使用 disabled-date 选项,设置一个函数来判断当前选择的日期是否被禁止。例如:
```
<el-date-picker v-model="date" :disabled-date="disabledDate"></el-date-picker>
```
```
methods: {
disabledDate(date) {
var now = new Date()
now.setDate(now.getDate() - 1)
return date < now
}
}
```
另外,可以使用 el-date-picker 的时间范围选项,设置一个时间范围,如:
```
<el-date-picker v-model="date" :picker-options="pickerOptions"></el-date-picker>
```
```
data() {
return {
pickerOptions: {
disabledDate: this.disabledDate,
shortcuts: [{
text: '三天后',
onClick(picker) {
var end = new Date()
end.setTime(end.getTime() + 3600 * 1000 * 24 * 3)
picker.$emit('pick', [new Date(), end])
}
}]
}
}
}
```
这里的时间跨度就是不超过三天。
相关推荐
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)