element UI 时间选择器限制时间无效

时间选择器限制不起作用

今天做时间选择器选择时间限制的时候，明明限制了时间，但是选择器无效，后来发现是format的原因导致的。这边限制的是开始时间可结束时间都只能选择之前一个月的，并且开始时间不能大于结束时间，结束时间不能小于开始时间。

<template>
    <div>
        <el-date-picker
        v-model="value1"
        align="right"
        type="date"
        placeholder="开始时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        :picker-options="pickerOptions">
        </el-date-picker>
        <el-date-picker
        v-model="value2"
        align="right"
        type="date"
        placeholder="结束时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        :picker-options="pickerOptions1">
        </el-date-picker>
    </div>
</template>

data(){
            return{
                value1:"",
                value2:"",
                pickerOptions:{ // 限制开始时间
                    disabledDate:(time)=>{
                        var tod = new Date()
                        var year = tod.getFullYear()
                        var month = tod.getMonth() + 1
                        var day = tod.getDate()
                        if(this.value2 !==''&&this.value2!==null){
                            if(month>1){
                                let threeMonths = `${year}/${month - 1}/${day}`
                                return(
                                    time.getTime() > Date.now() || time.getTime() > this.value2 || time.getTime() < new Date(threeMonths)
                                )
                            }else{
                                month = 12
                                let threeMonths = `${year - 1}/${month}/${day}`
                                return(
                                    time.getTime() > Date.now() || time.getTime() > this.value2 || time.getTime() < new Date(threeMonths)
                                )
                            }
                        }else{
                            if(month>1){
                                let threeMonths = `${year}/${month - 1}/${day}`
                                return(
                                    time.getTime() > Date.now()|| time.getTime() < new Date(threeMonths)
                                )
                            }else{
                                month = 12
                                let threeMonths = `${year - 1}/${month}/${day}`
                                return(
                                    time.getTime() > Date.now() || time.getTime() < new Date(threeMonths)
                                )
                            }
                        }
                    }
                },
                pickerOptions1:{ // 限制结束时间
                    disabledDate:(time)=>{
                        var tod = new Date()
                        var year = tod.getFullYear()
                        var month = tod.getMonth() + 1
                        var day = tod.getDate()
                        if(this.value2 !==''&&this.value2!==null){
                            if(month>1){
                                let threeMonths = `${year}/${month - 1}/${day}`
                                return(
                                    time.getTime() > Date.now() || time.getTime() < this.value1 || time.getTime() < new Date(threeMonths)
                                )
                            }else{
                                month = 12
                                let threeMonths = `${year - 1}/${month}/${day}`
                                return(
                                    time.getTime() > Date.now() || time.getTime() < this.value1 || time.getTime() < new Date(threeMonths)
                                )
                            }
                        }else{
                            if(month>1){
                                let threeMonths = `${year}/${month - 1}/${day}`
                                return(
                                    time.getTime() > Date.now()|| time.getTime() < new Date(threeMonths)
                                )
                            }else{
                                month = 12
                                let threeMonths = `${year - 1}/${month}/${day}`
                                return(
                                    time.getTime() > Date.now() || time.getTime() < new Date(threeMonths)
                                )
                            }
                        }
                    }
                }
            }
        }

实际测试是无效的，如下图：

按正常来讲应该是结束时间是不能选择2.16之前的，现在依然能选择，问题在于绑定的是value-format属性，这时候用来判断的时间是被格式化后的，2021-02-16 00:00:00，不再是之前的时间了，需要一层转换

time.getTime() < this.value1 // 换成  time.getTime() < new Date(this.value1).getTime() 
time.getTime() < new Date(this.value1).getTime() 

这样就可以了，因为时间格式没转换导致一直无效。