element ui使用——日期选择器禁用问题

element ui 日期选择器禁用问题

要求 ：两个独立的日期选择器；开始日期选择不能低于结束时间；结束日期选择不能早于开始日期

方法 element ui的 picker-options里面的disabledDate 设置禁用状态，参数为当前日期，要求返回 Boolean

<template>
    <div class="elementBox">
        <div class="block">
            <span class="demonstration">开始时间:</span>
            <el-date-picker v-model="startDate" type="date" placeholder="选择日期" :picker-options="pickerOptionsStart">
            </el-date-picker>
        </div>
        <div class="block">
            <span class="demonstration">结束时间:</span>
            <el-date-picker v-model="endDate" type="date" placeholder="选择日期" :picker-options="pickerOptionsEnd">
            </el-date-picker>
        </div>
    </div>

</template>

<script>
export default {
    data() {
        return {
            startDate: "",//开始日期
            pickerOptionsStart: {
                disabledDate: (time) => {
                    let maxDate = new Date(this.endDate).getTime()//拿到输入的结束日期
                    return time.getTime()>maxDate //判断大于结束日期 返回true 禁用
                }
            },
            endDate: "",//结束日期
            pickerOptionsEnd: {
               disabledDate: (time) => {
                    let minDate = new Date(this.startDate).getTime()//拿到输入的开始日期
                    return time.getTime()<minDate //判断小于开始日期 返回true 禁用
                }
            },
        }
    }
}

</script>

<style lang='less' scoped>
.elementBox {
    display: flex;

    .block {
        margin-left: 20px;
    }
}
</style>

效果

    margin-left: 20px;
}

}

效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/091848312e5d45c2ab3070dd67b478d4.bmp#pic_center)