el-date-picker 时间限制(精确到时、分、秒)

问题场景

在一次项目中,有一个这样的需求就是填报时间需要在上一次提交信息之后,在限制时间时发现,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`,
}
},
  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值