两个element时间选择框,怎么让第二个选的时间不能早于第一个的,如果早于第一个则提示

两个element时间选择框,怎么让第二个选的时间不能早于第一个的,如果早于第一个则提示

用change去监听,选择后对比第一个选择框的时间再做判断

选择后 转时间戳

<template>
<div>
  <el-time-select
    placeholder="起始时间"
    v-model="startTime"
>
  </el-time-select>
  <el-time-select
    placeholder="结束时间"
    v-model="endTime" @change="endTimeChange">
  </el-time-select>
</div>
</template>
 
<script>
  export default {
    data() {
      return {
        startTime: '',
        endTime: ''
      };
    },
  methods:{
  endTimeChange(){
    new Date(this.endTime).getTime() < new Date(this.startTime).getTime()?this.$message.error('第二个时间早于第一个'):''

  }  
  }
  }
</script>

<template>
  <el-time-select
    placeholder="起始时间"
    v-model="startTime"
    :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '18:30'
    }">
  </el-time-select>
  <el-time-select
    placeholder="结束时间"
    v-model="endTime"
    :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '18:30',
      minTime: startTime
    }">
  </el-time-select>
</template>

<script>
  export default {
    data() {
      return {
        startTime: '',
        endTime: ''
      };
    }
  }
</script>

文档里有

思路:
第一种:
选择第二个时间时候加判断,时间大于第一次就return, 第二次选择时间清空
第二种:
选择完第一次时间之后,就用picker-options 属性将第一次时间之前的禁止选择
参考案例:
我提供的案例是禁止今日之前的时间选择,你需要更改一下,当第一次时间选择之后更改一下时间字段

<template>
    <div>
        <el-date-picker
                :disabled="isDisabled"
                :editable="false"
                :clearable = "true"
                v-model="starttime"
                time-arrow-control
                :picker-options="{
                                   disabledDate: time => {
                                      return time.getTime() < Date.now() - 3600 * 1000 * 24
                                    },
                                    selectableRange: startTimeRange
                                  }"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择开始日期"
        />


    </div>
</template>

<script>
    import moment from 'moment'
    export default {
        data() {
            return {
                starttime:''
            }
        },
        watch: {
            starttime:{
                handler(newValue, oldValue) {
                    console.log(oldValue);
                    if(newValue){

                        let nowDate = moment().format('YYYY-MM-DD HH:mm:ss');
                        let dt = nowDate.split(" ");
                        let st = '';

                        if(newValue.split(" ")[0] == dt[0]){
                            // 是今天,选择 的时间开始为此刻的时分秒
                            st = dt[1];
                        }else{
                            // 明天及以后从0时开始
                            st = '00:00:00';
                        }

                        this.startTimeRange =  st + ' - 23:59:59';
                        //例如:如果今天此刻时间为10:41:40 则选择时间范围为: 10:41:40 - 23:59:59
                        //否则为:00:00:00- 23:59:59
                    }
                }
            }
        },



    }
</script>

<style scoped>

</style>

```