完成功能：

两个DatePicker日期框开始日期大于等于当前日期且小于结束日期，结束日期大于开始日期和当前日期
两个TimePicker时间框在开始日期结束日期同一天前提下，开始时间小于结束时间，结束时间大于开始时间

vue代码：

<FormItem>
   <ul>
    <li class="order_time clear_padding">
              <DatePicker
                @on-change="startdateChange"
                v-model="orderAdd.begin_time_date"
                class="order_time_date"
                type="date"
                placeholder="请选择开始日期"
                :options="startDate"
              ></DatePicker>
              <TimePicker
                @on-change="startTimeChange"
                v-model="orderAdd.begin_time_time"
                format="HH:mm"
                placeholder="请选择开始时间"
                :disabled-hours="startHours"
              ></TimePicker>
            </li>
            <li class="order_time clear_padding">
              <DatePicker
                @on-change="enddateChange"
                v-model="orderAdd.end_time_date"
                class="order_time_date"
                type="date"
                placeholder="请选择结束日期"
                :options="endDate"
              ></DatePicker>
              <TimePicker
                @on-change="endTimeChange"
                v-model="orderAdd.end_time_time"
                format="HH:mm"
                placeholder="请选择结束时间"
                :disabled-hours="endHours"
              ></TimePicker>
            </li>
   </ul>
</FormItem>

js代码：

export default {
    data() {
      return {
        orderAdd: {
          begin_time_date: "",
          begin_time_time: "",
          end_time_date: "",
          end_time_time: "",
          begin_time: "",
          end_time: "",
        },
        startDate: {},
        endDate: {},
        allHours:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
        startHours: [],
        endHours: [],
      }
    },
 
    methods: {
      startdateChange(e) {
      this.orderAdd.begin_time_date = e;
      this.endDate = {
        disabledDate: date => {
          let startTime = this.orderAdd.begin_time_date
            ? new Date(this.orderAdd.begin_time_date).valueOf()
            : "";
          return date && date.valueOf() < startTime;
          //  return date && (date.valueOf() < startTime-86400000 || date.valueOf() > Date.now()-86400000) ;  //此约束为当日之前开始日期之后
        }
      };
    },
    startTimeChange(e) {
      var _this = this;
      _this.orderAdd.begin_time_time = e;
      if (this.orderAdd.begin_time_date == this.orderAdd.end_time_date && this.orderAdd.begin_time_date != '') {
        let ar = _this.allHours.filter(function(elem) {
          return elem < Number(_this.orderAdd.begin_time_time.split(":")[0]);
        });
        _this.endHours = ar;
      }
    },
    enddateChange(e) {
      this.orderAdd.end_time_date = e;
      this.startDate = {
        disabledDate: date => {
          let endTime = this.orderAdd.end_time_date
            ? new Date(this.orderAdd.end_time_date).valueOf() -
              1 * 24 * 60 * 60 * 1000
            : "";
          return (
            date &&
            (date.valueOf() > endTime || date.valueOf() < Date.now() - 86400000)
          ); //此约束为当日之前开始日期之后
        }
      };
    },
    endTimeChange(e) {
      var _this = this;
      _this.orderAdd.end_time_time = e;
      if (this.orderAdd.begin_time_date == this.orderAdd.end_time_date && this.orderAdd.begin_time_date != '') {
        let ar = _this.allHours.filter(function(elem) {
          return elem > Number(_this.orderAdd.end_time_time.split(":")[0]);
        });
        _this.startHours = ar;
      }
    },
  },
  mounted() {
    var _this = this;
    // 刚进页面就加载预约开始时间不得小于当前时间
      this.startDate = {
        disabledDate: date => {
          return date && date.valueOf() < Date.now() - 86400000; //此约束为当日之前开始日期之后
        }
      };
      // 刚进页面就加载预约结束时间不得小于当前时间+1天
      this.endDate = {
        disabledDate: date => {
          return date && date.valueOf() < Date.now(); //此约束为当日之前开始日期之后
        }
      };
  }
}