elementUI日期选择器,选择一个日期范围,其中一个日期选了25号,另一个日期只可选择19号当天或者31号
时间: 2023-08-12 16:05:04 浏览: 72
日期选择器
可以通过设置 `picker-options` 属性来限制日期选择的范围。具体实现如下:
```
<el-date-picker
v-model="dateRange"
type="daterange"
:picker-options="pickerOptions"
></el-date-picker>
```
然后在 Vue 实例中定义 `pickerOptions` 对象,设置 `disabledDate` 方法来限制日期选择的范围:
```
data() {
return {
dateRange: '', // 绑定的日期范围
pickerOptions: {
disabledDate: (time) => {
const selectedDate = new Date(this.dateRange[0]) // 已选择的日期
if (selectedDate.getDate() === 25) { // 如果已选择日期是25号
const currentDate = new Date(time) // 当前日期
const currentDay = currentDate.getDate()
return currentDay !== 19 && currentDay !== 31 // 只允许选择19号和31号
}
return false // 其他情况不做限制
}
}
}
}
```
通过判断已选择的日期是否为25号,来决定是否限制选择范围。如果已选择日期是25号,则只允许选择19号和31号,否则不做限制。
阅读全文