1、背景:日期组件根据当前选中的日期值,要求只能选择当前日期前后三个月的日期,并且支持快捷选项。html代码如下:
<el-date-picker
v-model="value2"
type="daterange"
value-format="yyyyMMdd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
2、方案 :在pickeroptions中根据当前的日期配置disabledData属性:
选择一个日期后作为结束日期或者起始日期记录下来,点击事件触发options中的onpick函数,在回调函数中有两个参数,一个偏大日期值一个偏小日期值;记录下之后根据业务要求区间定义pickerRange,这里设置三个月,只能选择该日期前后三个月;
pickerMinDate:null,
pickerRange:3600*1000*24*90,
pickerOptions: {
onPick:({maxDate,minDate})=>{
if(minDate && _this.pickerMinDate){
_this.pickerMinDate = null;
}else if(minDate){
_this.pickerMinDate = minDate.getTime();
}
},
disabledDate:(time) =>{
if(_this.pickerMinDate){
return (time.getTime() > (_this.pickerMinDate + _this.pickerRange));
}
return false;
},
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
3、注意:快捷键可能会跟自定义onpick事件冲突导致日期都不可选 ,这里根据自身业务具体情况具体分析。
版权归原作者 Ei团团 所有, 如有侵权,请联系我们删除。