element ui 日期选择器,点击确定默认为此刻,设置的:picker-options禁用不起作用

问题遇到的现象和发生背景

使用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);

          }
        },
运行结果及报错内容

这是刚打开时间选择器

img

然后直接点击确定

img

我想要达到的结果

期望没选择时间直接点击确定,无效果或者有消息提示,另外想知道造成这种场景的原因是什么!

上面他们说了,可以设置默认时间,如果你不想设置默认时间,可以拆分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天后的时间就行了,因为组件没有选择时点击确定默认值为当天时间

img


增加default-value属性,更改选择器的默认时间
出现问题原因是未进行操作,选择器默认时间为当天

这个问题我也遇到了,一时没解决,目前的方法就是把下面的“确定”按钮隐藏掉。

.el-picker-panel__footer {
  display: none;
}