PLUS el-date-picker限制90天
时间: 2024-12-28 08:18:59 浏览: 7
### 设置 el-date-picker 日期选择范围为90天内
为了实现 `el-date-picker` 中仅能选择未来90天内的日期,可以利用组件的 `disabledDate` 属性来定义不可选中的日期逻辑。具体来说,在 `picker-options` 配置项中指定 `disabledDate` 函数,该函数接收一个 `time` 参数并返回布尔值以决定此日期是否可用。
对于限制用户只能选择当前日起之后最多90天之内的日期,可以通过计算最大允许的选择日期来进行控制:
```javascript
const pickerOptions = {
disabledDate(time) {
const today = new Date();
const maxSelectableDay = new Date(today);
maxSelectableDay.setDate(maxSelectableDay.getDate() + 90); // 允许的最大日期设为今天加上90天
return (
time.getTime() < today.getTime() - 8.64e7 || // 不可以选择今天的前一天之前的任何一天
time.getTime() > maxSelectableDay.getTime()
);
}
};
```
上述代码片段通过 JavaScript 的 `Date()` 对象创建了一个表示今日的新实例,并基于它构建了另一个代表最晚可选项的日子对象。接着在 `disabledDate` 方法里判断传入的时间戳如果小于当天零点减去一天的时间戳或者是大于设定好的最远有效日,则这些日子都将被禁用掉[^1]。
当应用到实际页面上的时候,记得把上面配置过的 `pickerOptions` 赋予给 `<el-date-picker>` 组件的相关属性上即可完成设置。
```html
<template>
<!-- 使用单个日期选择 -->
<div>
<el-date-picker
v-model="selectedDate"
type="date"
placeholder="请选择日期"
:picker-options="pickerOptions">
</el-date-picker>
<!-- 或者使用日期区间选择 -->
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
selectedDate: '',
dateRange: [],
pickerOptions,
};
},
}
</script>
```
阅读全文