需要,默认抉择十天区间,并且每次抉择的日期必须小余 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>