关于vue中elementui时间组件开始时间和结束时间的限制问题

如果开始时间和结束时间并存的话，那么就需要对二者做出限制：结束时间>=开始时间&&开始时间<=结束时间


第一种实现方式：

<template>
   <div>
	<div>
	    开始时间：
	    <el-date-picker
	        v-model="startTime"
	        type="date"
	        placeholder="开始日期"
	        value-format="yyyy-MM-dd"
	        :picker-options="pickerOptionsStart"
	        style="width:14%">
	    </el-date-picker>
	</div>
	
	<div>
	    结束时间：
	    <el-date-picker
	        v-model="endTime"
	        type="date"
	        placeholder="结束日期"
	        value-format="yyyy-MM-dd"
	        :picker-options="pickerOptionsEnd"
	        style="width:14%;margin-top:20px;">
	    </el-date-picker>
	</div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      startTime: '',
      endTime: '',
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.endTime) {
                return time.getTime() > new Date(this.endTime).getTime()
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.startTime) {
            return time.getTime() < new Date(this.startTime).getTime() - 86400000
          }
        }
      }
    }
  }
}

• 第二种实现方式：

<template>
  <div>
    <!-- 开始时间 -->
    <div style=" width: 220px; margin: 20px auto 0;">
        <el-date-picker
                v-model="startDate"
                type="date"
                placeholder="选择开始日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptionsStart"
                @change="changeStart">
        </el-date-picker>
    </div>
    <!-- 结束时间 -->
    <div style=" width: 220px; margin: 20px auto 0;">
        <el-date-picker
                v-model="endDate"
                type="date"
                placeholder="选择结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptionsEnd"
              @change="changeEnd">
        </el-date-picker>
    </div>
  </div>
</template>

<script>
// 1、引入子组件
export default {
  data(){
    return {
      pickerOptionsStart: {},
      pickerOptionsEnd: {},
      startDate:'',//开始时间
      endDate:'',//结束时间
    }
  },
  methods:{
    changeStart() { // 限制开始时间
        this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
            disabledDate: time => {
              if (this.startDate) {
                    return time.getTime() < new Date(this.startDate).getTime() - 86400000
              }
            }
        })
    },

    changeEnd() { // 限制结束时间
        this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
            disabledDate: time => {
              if (this.endDate) {
                      return time.getTime() > new Date(this.endDate).getTime()
              }
            }
        })
    }
  }
}
</script>