时间限制,elementUI时间选择器结束时间不能超过开始时间

表单:

  <el-form :model="answerForm" :rules="answerRules" ref="answerForm" label-width="100px" :inline="true"
                        style="padding: 0 40px 20px ;">
                        <el-form-item label='时间：' prop="beginTime">
                            <el-date-picker v-model="answerForm.beginTime" style="width: 220px" placeholder="请选择开始时间"
                                value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :picker-options="{
                                    disabledDate: (time) => {
                                        return dataTime.startTimeData(time);
                                    },
                                    selectableRange: this.startTimeRange,
                                }">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>至</el-form-item>
                        <el-form-item prop="endTime">
                            <el-date-picker v-model="answerForm.endTime" style="width: 220px" placeholder="请选择结束时间"
                                value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :picker-options="{
                                    disabledDate: (time) => {
                                        return dataTime.endTimeData(time);
                                    },
                                    selectableRange: this.endTimeRange,
                                }"></el-date-picker>
                        </el-form-item>
                 
                        <div style="width: 100%;margin-top: 30px;display: flex;justify-content: right;">
                            <el-form-item>
                                <el-button type="primary" @click="timeSubmitForm">确认</el-button>
                                <el-button @click="cancel">取消</el-button>
                            </el-form-item>
                        </div>
                    </el-form>

1.首先下载并导入安装moment库：
npm install moment
import moment from 'moment'

2.data里面定义时间变量

//时间表单
            answerForm: {
                type: '',
                id: undefined,
                subsectionId: undefined,
                beginTime: undefined,
                endTime: undefined
            },
            //时间前后限制
            startTimeRange: null,
            endTimeRange: null,
            dataTime: {
                // 开始时间范围限制
                startTimeData: (time) => {
                    if (this.answerForm.endTime != "") {
                        return (
                            new Date(this.answerForm.endTime).getTime() < time.getTime() ||
                            time.getTime() > Date.now()
                        );
                    }
                },
                // 结束时间范围限制
                endTimeData: (time) => {
                    return (
                        time.getTime() <=
                        new Date(this.answerForm.beginTime).getTime() - 8.64e7
                    );
                }
            }

3.watch监听时间

watch: {
        "answerForm.endTime": {
            handler(nv) {
                if (!this.answerForm.beginTime) return;
                let dateFlag = moment(this.answerForm.beginTime).isBefore(nv); //false moment比较时间大小
                // const curTime = new Date()
                if (!dateFlag) {
                    // 当选择的日期就是当天的时候，这个时候就要限制时间应当小于此时此刻的时分秒
                    this.endTimeRange = `${moment(this.answerForm.beginTime).format(
                        "HH:mm:ss"
                    )} - 23:59:59`;
                } else {
                    // 当选择的日期小于当天的时候，这时需要把时分秒的限制放开，否则不能选择
                    this.endTimeRange = "00:00:00 - 23:59:59";
                }
            },
        },
        "answerForm.beginTime": {
            handler(nv) {
                if (nv && !this.answerForm.endTime) {
                    this.endDefaultTime = moment(nv).format("HH:mm:ss");
                }
                if (this.answerForm.endTime == "") return;

                if (
                    moment(nv).format("YYYY-MM-DD") ==
                    moment(this.answerForm.endTime).format("YYYY-MM-DD")
                ) {
                    // 当选择的日期就是当天的时候，这个时候就要限制时间应当小于此时此刻的时分秒
                    this.startTimeRange = `00:00:00-${moment(this.answerForm.endTime).format(
                        "HH:mm:ss"
                    )}`;
                } else {
                    // 当选择的日期小于当天的时候，这时需要把时分秒的限制放开，否则不能选择
                    this.startTimeRange = "00:00:00 - 23:59:59";
                }
            },
        },
    },