el-date-picker picker-options 结束时间不能早于开始时间


要求:结束时间不能早于开始时间

html部分代码


    


    

js部分代码
要点:要使用计算属性来给picker-options的对象赋值。
以结束时间举例,如果不使用计算属性,在disabledDate内部会监听不到开始时间的变化,拿到的开始时间永远是初始化的时候赋值。

遗留问题:开始时间的时分秒如果不是"00:00:00",结束时间的当天则不可选。正确的应该是不可选的时间精确到时分秒。

// 监听开始时间,开始时间清空时,要同步清空结束时间
@Watch('inspectionForm.startTime')
watchStartTime(newStartTime) {
    if (newStartTime == null)
        this.inspectionForm.endTime = null
}

get pickerOptionsStart() {
    return {
        disabledDate: (time) => {
            if (this.inspectionForm.endTime) {
                return time.getTime() > new Date(this.inspectionForm.endTime as Date).getTime()
            }
        },
        selectableRange: "00:00:00 - 23:59:59"
    }
}

get pickerOptionsEnd() {
    return {
        disabledDate: (time) => {
            if (this.inspectionForm.startTime) {
                return time.getTime() < new Date(this.inspectionForm.startTime as Date).getTime()
            }
        },
        selectableRange: "00:00:00 - 23:59:59"
    }
}

你可能感兴趣的:(el-date-picker picker-options 结束时间不能早于开始时间)