<el-date-picker ref="datePickerRef" :disabled-date="disabledDate" style="width: 100%; height: 34px" v-model="StartDateEndDate" format="YYYY-MM-DD" name="StartDateEndDate" range-separator="-" value-format="YYYY-MM-DD" type="daterange" start-placeholder="请选择开发开始时间" end-placeholder="开发结束时间" @change="onChange" :teleported="false" />设置最大时间跨度为一年
时间: 2023-12-10 16:37:01 浏览: 92
My97DatePicker:开始时间和结束时间的最大间隔为10天,并且不大于当前时间
5星 · 资源好评率100%
你可以通过在 `disabledDate` 函数中判断日期是否超过一年来设置最大时间跨度为一年。这个函数需要返回一个布尔值,如果返回 `true`,则表示该日期不可选。以下是一个示例代码:
```html
<el-date-picker
ref="datePickerRef"
:disabled-date="disabledDate"
style="width: 100%; height: 34px"
v-model="StartDateEndDate"
format="YYYY-MM-DD"
name="StartDateEndDate"
range-separator="-"
value-format="YYYY-MM-DD"
type="daterange"
start-placeholder="请选择开发开始时间"
end-placeholder="开发结束时间"
@change="onChange"
:teleported="false"
/>
<script>
export default {
data() {
return {
StartDateEndDate: null,
};
},
methods: {
disabledDate(date) {
if (!this.StartDateEndDate) {
// 如果没有选择开始和结束日期,则所有日期都可选
return false;
}
const [startDate, endDate] = this.StartDateEndDate;
const oneYearLater = new Date(startDate);
oneYearLater.setFullYear(oneYearLater.getFullYear() + 1);
// 如果选中的日期范围超过一年,则不可选
return date > oneYearLater || date < startDate || date > endDate;
},
onChange(value) {
this.StartDateEndDate = value;
},
},
};
</script>
```
在上面的代码中,我们首先定义了一个 `StartDateEndDate` 变量来保存选择的日期范围。然后在 `disabledDate` 函数中,我们首先判断是否已经选择了开始和结束日期,如果没有,则所有日期都可选。如果已经选择了开始和结束日期,则计算出一年后的日期,然后判断当前日期是否超过了这个日期或者是否在选择的日期范围之外。最后在 `onChange` 函数中更新 `StartDateEndDate` 变量。
阅读全文