elementui 时间范围选择器--动态限制时间范围
需求:elementUI中的时间范围选择组件,需要限制每次只能选择一年内的时间
组件:
<el-date-picker style="width:auto" v-model="form.daterange" type="daterange" :picker-options="pickerOptions" @change="changeDate" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"> </el-date-picker>
js:
data() {
let _minTime = null
let _maxTime = null
return {
pickerOptions: {
onPick(time) {
// 如果选择了只选择了一个时间
if (!time.maxDate) {
let timeRange = 365 * 24 * 60 * 60 * 1000; // 时间范围一次只能选1年内
_minTime = time.minDate.getTime() - timeRange; // 开始时间
_maxTime = time.minDate.getTime() + timeRange; // 结束时间
} else {
_minTime = _maxTime = null;
}
},
disabledDate(time) {
if (_minTime && _maxTime) {
return time.getTime() < _minTime || time.getTime() > _maxTime;
}
}
}
}