element ui 中 el-date-picker 时间选择器中，开始时间和结束时间项关联

场景：在项目开发中，el-date-picker 的开始时间和结束时间常常 配合使用 导致 disabled-date 的代码冗余，结束时间中又和开始时间关联。所以单单的提取方法不行，然后我想到了声明一个class，关联的变量 在开始时间发生变化的时候用@blur 取监听，然后更新

原代码：
 <el-form-item label="开始时间" prop="startTime">
                <el-date-picker
                    v-model="form.startTime"
                    type="datetime"
                    placeholder="选择开始时间"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    :disabled-date="
                        time => {
                            return Date.now() - 8.64e7 > time.getTime();
                        }
                    "
                    style="width: 100%"
                >
                </el-date-picker>
            </el-form-item>

            <el-form-item label="结束时间" prop="endTime">
                <el-date-picker
                    v-model="form.endTime"
                    type="datetime"
                    placeholder="选择结束时间"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    :disabled-date="
                        time => {
                            return (
                                time.getTime() <
                                    new Date(this.startTime).getTime() -
                                        8.64e7 ||
                                time.getTime() <
                                    new Date(this.startTime).getTime()
                            );
                        }
                    "
                    style="width: 100%"
                >
                </el-date-picker>
            </el-form-item>

优化后的代码片段：

<el-form-item label="开始时间" prop="startTime">
    <el-date-picker
        v-model="form.startTime"
        type="datetime"
        placeholder="选择开始时间"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        :disabled-date="pickerOptions.start()"
        style="width: 100%"
         @blur="pickerOptions.startTime = form.startTime"
    >
    </el-date-picker>
</el-form-item>

<el-form-item label="结束时间" prop="endTime">
    <el-date-picker
        v-model="form.endTime"
        type="datetime"
        placeholder="选择结束时间"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        :disabled-date="pickerOptions.end()"
        style="width: 100%"
    >
    </el-date-picker>
</el-form-item>

class PickerOptions {
    startTime: string;
    constructor(props: string) {
        this.startTime = props;
    }
    start() {
        return (time: { getTime: () => number; }) => {
            return Date.now() - 8.64e7 > time.getTime()
        }
    }
    end() {
        return (time: { getTime: () => number; }) => {
            return time.getTime() <
                new Date(this.startTime).getTime() - 8.64e7 ||
                time.getTime() < new Date(this.startTime).getTime();
        }

    }
}

let pickerOptions = new PickerOptions(data.form.startTime);