element ui两个日期选择器限制选择范围

假定有这么个场景需要两个搜索条件，分别为开始时间和结束时间；要求使用两个不同的日期选择器，并且需在不添加表单校验的情况下保证日期输入的合理性，即开始时间必须小于结束时间

思路就是通过配置日期选择器的disabledDate属性，根据条件禁用日期选项，具体实现如下：

<template>
    <div id="app">
        <el-form label-width="100px">
            <el-form-item label="开始时间">
                <el-date-picker v-model="startTime" type="date" value-format="yyyy-MM-dd" :picker-options="startPickerOpts" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
                <el-date-picker v-model="endTime" type="date" value-format="yyyy-MM-dd" :picker-options="endPickerOpts" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    
    
    name: "App",
    data() {
    
    
        return {
    
    
            startTime: '',
            endTime: '',
            startPickerOpts: {
    
    
                disabledDate: (t) => {
    
    
                    return this.endTime ? t.getTime() > new Date(this.endTime).getTime() - 86400000 : false
                }
            },
            endPickerOpts: {
    
    
                disabledDate: (t) => {
    
    
                    return this.startTime ? t.getTime() < new Date(this.startTime).getTime() : false
                }
            }
        }
    },
};
</script>

注：如果new Date()传入一个空字符串，因为日期不合法，getTime方法获取的日期是NaN