问题场景
在一次项目中,有一个这样的需求就是填报时间需要在上一次提交信息之后,在限制时间时发现,el-date-picker中的pickerOption中的disableDate是基于日期限制的,若限制日期为今日凌晨,那么今天之后的日期都不能填
解决方案
经查找发现el-date-picker 有个属性可以专门用来限制时分秒:selectableRange
代码如下:这里的disabled_H等是做限制的基本时间的时、分、秒,通过这样给用户可选择的范围做限制,就能起到限制选择的时、分、秒的作用了,用户不能选择基准时间之前的时分秒。
<el-date-picker
style="width:80%"
v-model="form.tbtime"
type="datetime"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
picker-options="pickerOptions1"
</el-date-picker>
computed:{
{pickerOptions1()
return disabledDate:(time)=>{
let pickDay = dayjs(this.form.data_time);
let curTime = dayjs(time);
return curTime < pickDay.startof('day').valueof();
},
selectableRange:`${this.disabled_H):${this.disabled_m}:${this.disabled_s)-23:59:59`,
}
},