在vue3语法中,elementui 中 datepicker type=year组件,如何禁用部分年份
时间: 2023-11-27 08:52:27 浏览: 72
element-ui 限制日期选择的方法(datepicker)
在 Element UI 的 datepicker 中,可以使用`disabled-date`属性来禁用部分日期。对于 type=year 的组件,可以通过设置 `disabled-date` 属性为一个函数,来禁用部分年份。
下面是一个示例代码:
```html
<template>
<el-date-picker
v-model="year"
type="year"
:picker-options="pickerOptions"
></el-date-picker>
</template>
<script>
export default {
data() {
return {
year: null,
pickerOptions: {
disabledDate: (date) => {
const year = date.getFullYear();
// 禁用 2020 年之前的所有年份
return year < 2020;
},
},
};
},
};
</script>
```
在上述代码中,我们定义了一个 `pickerOptions` 对象,并设置其中的 `disabledDate` 属性为一个函数,该函数接受一个日期参数 `date`,并返回一个布尔值。在函数中,我们获取日期对应的年份,并判断是否小于 2020 年,如果是,则禁用该年份。你可以根据自己的需求来修改这个函数,以禁用指定的年份。
阅读全文