elementUI,日期区间控件选择了一个日期15后,禁用日期只能为不等于10号和20号这两天的日期,设置完禁用日期后日期控件不回显
时间: 2023-11-18 12:04:46 浏览: 37
你可以通过监听日期区间控件的 `change` 事件,在事件回调函数中手动更新日期区间控件的值,以达到回显的效果。同时,需要注意以下几点:
1. 禁用日期需要传入一个函数作为参数,该函数返回值为 `true` 表示当前日期应该被禁用,返回值为 `false` 表示当前日期可用。
2. 在更新日期区间控件的值时,需要使用 `this.$refs.datePicker.$emit('pick', [startDate, endDate])` 这样的方式来手动触发日期区间控件的 `pick` 事件,从而更新日期区间控件的值。
下面是一个示例代码,供参考:
```html
<template>
<el-date-picker
v-model="dateRange"
type="daterange"
:picker-options="pickerOptions"
@change="handleChange"
ref="datePicker"
></el-date-picker>
</template>
<script>
export default {
data() {
return {
dateRange: [],
pickerOptions: {
disabledDate: (date) => {
const disabledDays = [10, 20]; // 禁用的日期
return disabledDays.includes(date.getDate());
},
},
};
},
methods: {
handleChange() {
this.$nextTick(() => {
this.$refs.datePicker.$emit('pick', this.dateRange);
});
},
},
};
</script>
```
希望能够帮助到你!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)