使用element UI 时间选择器,需求需要在此刻之后加3天,之前的时间都被禁用,不能被选择,但实际上是打开时间选择器,样式上显示禁用时间是对的,但如果不选择时间,直接点击确定按钮,则v-model会直接设置为此刻的值,
这是选择器的html代码
<el-date-picker
v-else
v-model="addForm.effectStartTime"
type="datetime"
popper-class="datetimepicker"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
:disabled="modify"
style="width:200px"
:picker-options="effectStartTimeVerify"
@change="changeEffectStartTime">
这是picker-options 的配置
effectStartTimeVerify: {
disabledDate: (time) => {
return time.getTime() < (Date.now() + 172800000);
// return time.getTime() < (Date.now() +86400000);
}
},
这是刚打开时间选择器
然后直接点击确定
期望没选择时间直接点击确定,无效果或者有消息提示,另外想知道造成这种场景的原因是什么!
上面他们说了,可以设置默认时间,如果你不想设置默认时间,可以拆分v-model为:value和@input,在input的回调里面判断一下如果时间为禁用了的时间,就设置为空字符串
let d = new Date()
let nowD = d.getTime()
let afterThree = nowD + 1000 * 60 * 60 * 24 * 3
将日期组件绑定的v-model:初始化的时候addForm.effectStartTime设为3天后的时间就行了,因为组件没有选择时点击确定默认值为当天时间
这个问题我也遇到了,一时没解决,目前的方法就是把下面的“确定”按钮隐藏掉。
.el-picker-panel__footer {
display: none;
}