el-date-picker时间限制 disable-date

### 设置 `el-date-picker` 组件中的禁用日期 为了在 `el-date-picker` 中设置特定日期不可选，可以利用其内置属性 `:disabled-date` 并绑定到一个自定义函数。此函数接收 JavaScript 的 `Date` 对象作为输入参数，并返回布尔值来决定对应日期是否应该被禁用。 对于简单的场景，比如想要禁用未来的日期： ```javascript const disabledFutureDates = (date) => { return date.getTime() > Date.now(); }; ``` 如果目标是阻止用户选择过去的日期，则调整条件表达式的逻辑方向即可[^3]。 当涉及到更复杂的业务需求时——例如基于两个动态变化的时间点（即起始日与终止日），则可以通过比较传入的 `date` 参数同这两个边界来进行控制[^2]。 下面给出一段综合性的代码片段用于展示如何实现上述功能，在这段代码里还包含了国际化支持以及样式定制等内容[^4]。 ```html <template> <div class="demo"> <el-date-picker v-model="time" type="daterange" :range-separator="$t('common.to')" :start-placeholder="$t('common.stime')" :end-placeholder="$t('common.etime')" style="width: 300px;" value-format="yyyy-MM-dd" :picker-options="pickerOptions" > </el-date-picker> </div> </template> <script> export default { data() { return { time: '', pickerOptions: { onPick({ maxDate, minDate }) { if (maxDate && !minDate) { this.maxDate = null; } this.minDate = minDate || maxDate; }, disabledDate(time) { if (this.minDate) { let curDayStart = new Date(this.minDate).setHours(0, 0, 0, 0); return ( time.getTime() < new Date(curDayStart).getTime() || time.getTime() > Date.now() ); } else { return time.getTime() > Date.now(); } } } }; } }; </script> ``` 通过这种方式能够灵活地满足不同应用场景下的日期选取限制要求。