• 选择开始日期之后，结束日期在开始日期之前禁用

<template>
  <div>
    <div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker
    @change="change"
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
  </div>
    <div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker
      v-model="value2"
      type="date"
      @focus="focus"
       :picker-options="pickerOptions1"
      placeholder="选择日期">
    </el-date-picker>
  </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value1: '',//开始日期
      value2: '',//结束日期
       pickerOptions1:{}//结束日期配置
    }
  },
methods: {
  change() {
    console.log(this.value1);
  },
  focus(time) {
    let aa = new Date(this.value1).getTime()
   this.pickerOptions1 = {
      disabledDate(time) {
            return time.getTime() < aa
          },
   }
  },
   disabledDate(time) {
            return time.getTime() > new Date(value1).getTime()
          },
},
  created () {
  }
}
</script>

<style lang='scss'>

</style>

效果

时间选择器.png

<template>
  <div>
    <div class="block">
    <span class="demonstration">开始日期</span>
    <el-date-picker
      v-model="startTime"
      type="date"
       value-format="yyyy-MM-dd"
      format="yyyy-MM-dd"
      :picker-options="pickerOptionsStart"
      placeholder="选择日期">
    </el-date-picker>
  </div>
    <div class="block">
    <span class="demonstration">结束日期</span>
    <el-date-picker
      v-model="endTime"
      type="date"
      value-format="yyyy-MM-dd"
      format="yyyy-MM-dd"

       :picker-options="pickerOptionsEnd"
      placeholder="选择日期">
    </el-date-picker>
  </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      startTime: '',//开始日期
      endTime: '',//结束日期
       pickerOptionsStart:{
         disabledDate:(time) => {
           let state
           if (this.endTime!=="") {
             state = time.getTime() > Date.now() || time.getTime() > new Date(this.endTime).getTime()
           }else {
             state = time.getTime() > Date.now()
           }
            return state
          },
       },//开始日期配置
       pickerOptionsEnd:{
         disabledDate:(time)=> {
            return time.getTime() < new Date(this.startTime).getTime()-86400000 || time.getTime() > Date.now()
           // return   time.getTime() > Date.now()
          },
       },//结束日期配置
      
    }
  },
methods: {
},
  created () {
  }
}
</script>

<style lang='scss'>

</style>