在Vue中结束时间不能小于开始时间（el-date-picker）

 

 1.HTML代码

                  <el-col :lg="4" :md="12">
                        <el-form-item label="开始时间:" prop="begin_time">
                            <el-date-picker v-model="where.begin_time" type="datetime" placeholder="选择日期时间"
                                value-format="yyyy-MM-dd HH:mm:ss" style="width: 200px;  " :default-value="beginTimeDefault"
                                :picker-options="pickerOptionsStart" @change="changeStart" :editable="false"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="4" :md="12">
                        <el-form-item label="结束时间" prop="end_time" style="margin-left:15px" :validator="myValidator">
                            <el-date-picker v-model="where.end_time" type="datetime" placeholder="选择日期时间"
                                value-format="yyyy-MM-dd HH:mm:ss" style="width: 200px;  " :default-value="endTimeDefault"
                                :picker-options="pickerOptionsEnd" @change="changeEnd" :editable="false"></el-date-picker>
                        </el-form-item>
                    </el-col>

2.data当中的数据

where: {
          begin_time: null,
          end_time: null
        },
           
 pickerOptionsStart: {},
 pickerOptionsEnd: {},

3. methods中的方法

 changeStart() { // 限制开始时间
            console.log(this.where.begin_time);
            if (this.where.begin_time) {
                if (this.where.end_time ) {
                    if (this.where.end_time <= this.where.begin_time) {
                        this.$message.warning('结束时间必须大于开始时间！');
                        this.where.begin_time = '';
                    }
                }
                this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
                    disabledDate: (time) => {
                        if (this.where.begin_time) {
                            return time.getTime() < this.where.begin_time;
                        }
                    },
                });
            } else {
                this.where.end_time = null
            }

        },

        changeEnd() { // 限制结束时间
            console.log(this.where.end_time);
            if ( this.where.begin_time) {
                if (this.where.end_time <= this.where.begin_time) {
                    this.$message.warning('结束时间必须大于开始时间！');
                    this.where.end_time = '';
                }
            }

            this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
                disabledDate: (time) => {
                    if (this.where.end_time) {
                        return time.getTime() > this.where.end_time;
                    }
                },
            });
        },