vue3 element-plus el-date-picker 禁选今日以后的日期,以及时间跨度不超过93天
时间: 2023-08-02 09:31:15 浏览: 213
可以通过设置 `el-date-picker` 的 `disabledDate` 和 `pickerOptions` 属性来实现禁选今日以后的日期和时间跨度不超过93天的功能。
具体实现步骤如下:
1. 设置 `el-date-picker` 的 `disabledDate` 属性,禁选今日以后的日期:
```html
<el-date-picker
v-model="date"
:disabled-date="disabledDate">
</el-date-picker>
```
```javascript
export default {
data() {
return {
date: new Date()
}
},
methods: {
disabledDate(time) {
return time.getTime() > Date.now()
}
}
}
```
2. 设置 `el-date-picker` 的 `pickerOptions` 属性,限制时间跨度不超过93天:
```html
<el-date-picker
v-model="date"
:disabled-date="disabledDate"
:picker-options="pickerOptions">
</el-date-picker>
```
```javascript
export default {
data() {
return {
date: new Date(),
pickerOptions: {
shortcuts: [{
text: '最近三个月',
onClick(picker) {
const start = new Date(new Date().getTime() - 93 * 24 * 3600 * 1000)
const end = new Date()
picker.$emit('pick', [start, end])
}
}]
}
}
},
methods: {
disabledDate(time) {
return time.getTime() > Date.now()
}
}
}
```
通过设置 `pickerOptions` 中的 `shortcuts` 属性,我们可以添加一个“最近三个月”的快捷选择,点击后可以选择时间跨度不超过93天的日期范围。
阅读全文