elementUI,日期区间控件选择了一个日期15后,禁用日期只能为不等于10号和20号这两天的日期,
时间: 2023-11-18 17:04:47 浏览: 31
可以通过 elementUI 中的 `disabledDate` 属性来实现日期区间控件选择后禁用某些日期,具体可以按照以下步骤实现:
1. 在日期区间控件上添加 `disabledDate` 属性,并把该属性绑定到一个函数中。
2. 在该函数中,获取选择的起始日期和结束日期。
3. 对于不等于 10 号和 20 号的日期,返回 `true`,否则返回 `false`,表示该日期应该被禁用。
以下是一个示例代码,可以根据实际情况进行修改:
```html
<el-date-picker
v-model="dateRange"
type="daterange"
:disabled-date="disabledDate"
></el-date-picker>
```
```javascript
methods: {
disabledDate(date) {
const [start, end] = this.dateRange;
if (!start || !end) {
return false;
}
const disabledStart = start.getDate() !== 15 && (date.getDate() === 10 || date.getDate() === 20);
const disabledEnd = end.getDate() !== 15 && (date.getDate() === 10 || date.getDate() === 20);
return disabledStart || disabledEnd;
}
}
```
在上述代码中,`disabledDate` 函数中首先获取了选择的起始日期和结束日期。然后对于每个日期,判断它是否为 10 号或 20 号,且选择的起始和结束日期都不等于 15 号,如果是,则返回 `true`,表示该日期应该被禁用。否则返回 `false`,表示该日期不应该被禁用。