el-date-picker禁止选择指定日期组
时间: 2023-07-24 14:09:43 浏览: 100
要禁止选择指定日期组,可以在 disabled-date 函数中判断当前日期是否位于指定日期组中。指定日期组可以用一个数组来表示,数组中的每个元素都是一个日期字符串,表示需要禁用的日期。
以下是一个示例代码,演示如何禁用 2022 年 10 月 1 日和 2022 年 10 月 2 日这两天:
```html
<template>
<el-date-picker
v-model="date"
:disabled-date="disabledDate"
type="date"
></el-date-picker>
</template>
<script>
export default {
data() {
return {
date: null,
disabledDates: ['2022-10-01', '2022-10-02'],
};
},
methods: {
disabledDate(date) {
return this.disabledDates.some((d) => {
const disabledDate = new Date(d);
return (
date.getFullYear() === disabledDate.getFullYear() &&
date.getMonth() === disabledDate.getMonth() &&
date.getDate() === disabledDate.getDate()
);
});
},
},
};
</script>
```
在上面的代码中,我们在组件的 data 选项中定义了一个 disabledDates 数组,表示需要禁用的日期组。在 disabledDate 方法中,我们使用 some 方法遍历 disabledDates 数组,判断当前日期是否与数组中的某个日期相同。如果相同,则返回 true,禁用该日期。如果不相同,则返回 false,允许选择该日期。
最后,在 el-date-picker 组件中,我们将 disabledDate 方法作为 disabled-date 属性的值传入,即可禁用指定日期组的选择。
阅读全文