el-date-picker 组件 按照年份显示范围
时间: 2023-10-03 22:04:51 浏览: 110
在使用 Element UI 的 el-date-picker 组件时,可以通过设置 picker-options 属性来限制日期选择范围。要按年份显示范围,可以设置 disabledDate 方法来禁用不在指定年份范围内的日期。
例如,要限制日期选择范围在当前年份和未来 5 年之间,可以按照以下步骤操作:
- 在模板中添加 el-date-picker 组件,并绑定 value 和 picker-options 属性:
<el-date-picker v-model="date" :picker-options="pickerOptions"></el-date-picker>
- 在 Vue 实例中定义 pickerOptions 数据对象,并设置 disabledDate 方法来禁用不在指定年份范围内的日期:
data() {
return {
date: '',
pickerOptions: {
disabledDate(date) {
const currentYear = new Date().getFullYear();
const year = date.getFullYear();
return year < currentYear || year > currentYear + 5;
}
}
}
}
这样,el-date-picker 组件就会显示当前年份和未来 5 年之间的日期范围。你可以根据自己的需求来修改 disabledDate 方法的实现逻辑。
阅读全文