el-date-picker 选择日期范围两个间隔时间

### 设置 `el-date-picker` 组件以选择具有特定间隔时间的日期范围 为了实现带有固定间隔时间的选择功能，在 Vue.js 中使用 Element UI 的 `el-date-picker` 组件时，可以通过自定义 `picker-options.disabledDate` 方法来控制可用的日期区间。具体来说： 当用户选择了开始日期之后，通过计算结束日期的有效范围并应用到第二个日期选择器上，以此确保两个日期之间的差值不超过设定的时间跨度。 对于希望限定起始时间和终止时间之间存在固定的天数差距的情况，可以在第一个输入框（即开始日期）改变事件触发后调整结束日期的选择限制逻辑[^1]。 下面给出一段代码示例展示如何配置这种行为： ```html <template> <div class="example"> <!-- 开始日期 --> <el-date-picker v-model="form.startTime" type="date" placeholder="选择开始日期" @change="handleStartDateChange" :picker-options="startPickerOptions" /> <!-- 结束日期 --> <el-date-picker v-model="form.endTime" type="date" placeholder="选择结束日期" :picker-options="endPickerOptions" /> </div> </template> <script> export default { name: 'ExampleComponent', data() { return { form: { startTime: '', endTime: '' }, startPickerOptions: {}, endPickerOptions: {} }; }, methods: { handleStartDateChange(value) { const startDate = this.form.startTime; // 如果未选择开始日期，则不限制结束日期 if (!startDate) { this.endPickerOptions = {}; return; } // 计算允许的最大结束日期 const maxEndDate = new Date(startDate); maxEndDate.setDate(maxEndDate.getDate() + 7); // 假设最大间隔为7天 this.endPickerOptions = { disabledDate(time) { return ( time.getTime() < startDate || time.getTime() > maxEndDate || (value && time.getTime() !== value.getTime()) ); } }; } } }; </script> ``` 在此例子中，每当更改了开始日期(`startTime`)，就会重新计算结束日期(`endTime`)所能选取的最大值，并更新相应的 `disabledDate` 函数以便于正确地禁用不符合条件的日子。这里假设最大的间隔期为七日；可以根据实际需求修改此数值[^4]。