elementUI日期选择器,选择一个时间范围,其中一个日期选了n,另一个日期只可选择n-6当天或者n+6当天
时间: 2024-02-01 18:14:22 浏览: 106
可以通过 `pickerOptions` 属性来自定义日期选择器,其中可以设置可选日期范围以及禁止选择的日期。具体代码如下:
```html
<el-date-picker
v-model="date"
:picker-options="pickerOptions"
type="date"
placeholder="选择日期">
</el-date-picker>
```
```javascript
data() {
return {
date: '',
pickerOptions: {
disabledDate: (time) => {
// 禁止选择 n 天之前的日期
const minDate = new Date(this.date)
minDate.setDate(minDate.getDate() - 6)
return time.getTime() < minDate.getTime()
},
shortcuts: [{
text: 'n+6 当天',
onClick(picker) {
const date = new Date(this.date)
date.setDate(date.getDate() + 6)
picker.$emit('pick', date)
}
}, {
text: 'n-6 当天',
onClick(picker) {
const date = new Date(this.date)
date.setDate(date.getDate() - 6)
picker.$emit('pick', date)
}
}]
}
}
}
```
在 `pickerOptions` 中,我们通过 `disabledDate` 方法禁止选择 n 天之前的日期,同时设置了两个快捷选项 `n+6 当天` 和 `n-6 当天`,点击这两个选项后会触发 `onClick` 回调,在回调中计算出对应的日期并通过 `$emit('pick', date)` 方法设置到日期选择器中。
阅读全文