elementui中el-date-picker的type=monthrange时限制可选范围只能选12个月
时间: 2023-12-06 17:45:26 浏览: 238
可以通过设置`picker-options`属性来限制可选范围。具体操作如下:
1. 在`el-date-picker`组件上添加`picker-options`属性,值为一个对象。
2. 在该对象中添加`disabledDate`属性,值为一个函数。
3. 在该函数中判断当前选择的日期是否在12个月范围内,如果不是则返回`true`,否则返回`false`。
示例代码如下:
```
<template>
<div>
<el-date-picker
v-model="dateRange"
type="monthrange"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
dateRange: [],
pickerOptions: {
disabledDate(date) {
const startDate = new Date().setMonth(new Date().getMonth() - 11);
const endDate = new Date();
return date < startDate || date > endDate;
}
}
};
}
};
</script>
```
在上述示例代码中,我们在`picker-options`中定义了`disabledDate`函数,并且设置了可选范围为当前月份往前推12个月。这样用户就只能选择12个月内的日期了。
阅读全文