el-date-picker 动态设置 disabled-date
时间: 2023-10-06 14:13:20 浏览: 159
vue element-ui el-date-picker限制选择时间为当天之前的代码
您可以通过设置 `disabled-date` 属性来动态禁用日期选择器中的某些日期。`disabled-date` 接受一个函数,该函数接收一个日期作为参数,并返回一个布尔值来指示是否禁用该日期。
下面是一个示例,演示如何动态禁用日期选择器中的周末日期:
```html
<template>
<el-date-picker
v-model="selectedDate"
:disabled-date="isWeekend"
type="date">
</el-date-picker>
</template>
<script>
export default {
data() {
return {
selectedDate: null
};
},
methods: {
isWeekend(date) {
const day = date.getDay(); // 获取星期几,0 表示星期日,1 表示星期一,以此类推
return day === 0 || day === 6; // 禁用星期日和星期六
}
}
};
</script>
```
在上述示例中,我们定义了一个 `isWeekend` 方法,它接收一个日期对象作为参数。在该方法中,我们使用 `getDay` 方法获取日期对应的星期几,并根据星期几是否为 0(星期日)或 6(星期六)来返回布尔值。如果返回 `true`,则表示该日期需要禁用。
您可以根据自己的需求修改 `isWeekend` 方法,来动态设置禁用的日期规则。
阅读全文