el-date-picker控制开始时间不能大于结束时间

好久不记录心得体会，今天加班有空写一个，刚好碰到
需要：有效日期，开始时间需要小于结束时间，结束时间要受限开始时间。
html

<el-form-item label="有效期" label-position="top">
                <span class="explain">未选择有效期则代表该角色人员长期有效</span>
                <el-col :span="11">
                    <el-form-item prop="validTime">
                        <el-date-picker
                                v-model="ruleForm.validTime"
                                :picker-options="pickerOptionsStart"
                                type="date"
                                placeholder="开始日期"
                                @change="changeEnd">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="2" style="text-align: center">—</el-col>
                <el-col :span="11">
                    <el-form-item prop="expirationTime">
                        <el-date-picker
                                v-model="ruleForm.expirationTime"
                                :picker-options="pickerOptionsEnd"
                                type="date"
                                placeholder="截止日期"
                                @change="changeStart">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>

data

pickerOptionsStart: {},
            pickerOptionsEnd: {},

js

// 结束时间限制开始时间
        changeStart() {
            if (!this.ruleForm.expirationTime) {
                this.pickerOptionsStart = {
                    disabledDate: {}
                };
                return;
            }
            this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
                disabledDate: (time) => {
                    var times = '';
                    times = time.getTime() > this.ruleForm.expirationTime;
                    return times;
                }
            });
        },
        // 开始时间 控制结束时间
        changeEnd() {
            if (!this.ruleForm.validTime) {
                this.pickerOptionsEnd = {
                    disabledDate: {}
                };
                return;
            }
            this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
                disabledDate: (time) => {
                    return time.getTime() < this.ruleForm.validTime;
                }
            });
        },

如果需要编辑回显，在渲染数据之前设置

//设置编辑回显时间限制范围
                this.pickerOptionsStart = Object.assign({}, {
                    disabledDate: (time) => {
                        return time.getTime() > timeToTimestamp(this.ruleForm.expirationTime);
                    }
                });
                this.pickerOptionsEnd = Object.assign({}, {
                    disabledDate: (time) => {
                        return time.getTime() < timeToTimestamp(this.ruleForm.validTime);
                    }
                });

timeToTimestamp 是时间格式转时间戳

/* 时间yyyy-MM-dd HH:mm:ss转为时间戳 */
        timeToTimestamp(time) {
            let timestamp = Date.parse(new Date(time).toString());
            //timestamp = timestamp / 1000; //时间戳为13位需除1000，时间戳为13位的话不需除1000
            return timestamp;
        },

就这么多了，应该都能看懂了哈
祝你顺利！！！