• template

<template>
  <el-form-item label="上线时间"  prop="upTime">
        <el-date-picker v-model="form.upTime" type="datetime" class="inputw" :picker-options="pickerOptionsStart"
          placeholder="选择日期时间" default-time="12:00:00" @change="changeEnd">
        </el-date-picker>

      </el-form-item>
      <el-form-item label="下线时间"  prop="outTime">
        <el-date-picker v-model="form.outTime" type="datetime" class="inputw" :picker-options="pickerOptionsEnd"
          placeholder="选择日期时间" default-time="12:00:00" @change="changeStart">
        </el-date-picker>
</template>

• 数据定义

<script>
export default {
        data(){
            return{
                upTime: '',
                outTime: '',
                //限制开始时间
                pickerOptionsStart: {
                    disabledDate(time) {
                        return time.getTime() < new Date(new Date().toLocaleDateString()).getTime();
                     }
                  },
                 pickerOptionsEnd: {},
           }
      }
}
</script>

• 实现方法

methods:{
      //结束时间限制开始时间
      changeStart() {

        this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
          // 可通过箭头函数的方式访问到this
          disabledDate: (time) => {
            //这样写有bug 
            //   return  this.outTime < time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
            var times = '';
            //百度没搜到试了好久才试出来
            times = this.outTime < time.getTime() || time.getTime() < new Date(new Date().toLocaleDateString())
              .getTime();
            //打印了几百条
            // console.log("times时间",times);
            return times
          }
        })

      },
      //开始时间 控制结束时间   
      changeEnd() {

        this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
          disabledDate: (time) => {

            return time.getTime() < this.upTime
          }
        })
      },
}