在Element UI的DatePicker组件中，如果你想要限制用户只能选择一年的时间跨度，你可以通过设置DatePicker的picker-options属性来实现。以下是一个示例代码：
<template>
<el-date-picker
v-model="value"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
</template>
<script>
export default {
data() {
return {
value: '',
pickerOptions: {
shortcuts: [{
text: '一年',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setFullYear(start.getFullYear() - 1);
start.setMonth(0);
start.setDate(1);
picker.$emit('pick', [start, end]);
}
}],
disabledDate(time) {
if (!this.value) return false;
const year = this.value[0].getFullYear();
const nextYear = year + 1;
return (
time.getTime() < this.value[0].getTime() ||
time.getFullYear() > nextYear
);
}
}
};
}
};
</script>在这个示例中，picker-options的disabledDate函数被用来禁用不在选定年份范围内的日期。shortcuts属性定义了一个快捷方式，点击后可以直接选择去年全年作为时间跨度。这样用户在选择日期范围时只能选择当前年份或去年的整个年度。