需求,默认选择十天区间,并且每次选择的日期必须小余90天。
/**
* 日期控件动态设置最大跨度,解决elementui日期区间,第一次点击日期,动态处理disabledDate禁用日期的跨度。
* @param {Number} _this this
* @param {Number} day 天
* @returns {Blob} 返回pickerOptions数据
* @example this.$fc.pickerOptionsDynamic(this, 90);
* */
export function pickerOptionsDynamic(_this, day) {
const time = 3600*1000*24*day;
let minDate = null;
const pickerOptions = {
disabledDate(time) {
if (minDate === null) {
const min = Date.now() - time;
return time.getTime() > Date.now() || time.getTime() < min;
} else {
const max = new Date(minDate).getTime() + time;
const min = new Date(minDate).getTime() - time;
if (max >= Date.now()) {
return time.getTime() > Date.now() || time.getTime() < min;
} else {
return time.getTime() > max || time.getTime() < min;
}
}
},
onPick: (opt) => {
minDate = _this.parseTime(opt.minDate, '{y}-{m}-{d}');
}
}
return pickerOptions;
}
<el-date-picker
v-model="queryParams.date"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:clearable="false"
:editable="false"
:unlink-panels="true"
:picker-options="$yFc.pickerOptionsDynamic(this, 90)">
</el-date-picker>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。