开始日期当天，时间只能选择此刻及后面的时间，
结束日期也选择当天的话，时间只能选择开始时间后面的时间，
如果不是当天时间默认0刻开始

1595815807(1).png

<template>
  <div class="home">
    <div>
      <el-date-picker
        v-model="startTime"
        type="datetime"
        :picker-options="{
          disabledDate: (time) => {
            return dataTime.startTimeData(time)
          },
          selectableRange: this.startTimeRange,
        }"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        placeholder="开始时间"
      ></el-date-picker>
    </div>
    <div>
      <el-date-picker
        v-model="endTime"
        type="datetime"
        :picker-options="{
          disabledDate: (time) => {
            return dataTime.endTimeData(time)
          },
          selectableRange: this.endTimeRange,
        }"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        placeholder="结束时间"
      ></el-date-picker>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      startTime: "",
      endTime: "",
      startTimeRange: null,
      endTimeRange: null,
      dataTime: {
        // 开始时间范围限制
        startTimeData: (time) => {
          if (this.endTime != "") {
            return time.getTime() < Date.now() || time.getTime() < this.endTime;
          } else {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        // 结束时间范围限制
        endTimeData: (time) => {
          return (
            time.getTime() < this.startTime ||
            time.getTime() < Date.now() - 8.64e7
          );
        },
      },
    };
  },
  watch: {
    startTime: {
      handler(newValue, oldValue) {
        if (newValue) {
          let nowDate = this.format(new Date(), "-");
          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
        }
      },
    },
    endTime: {
      handler(newValue, oldValue) {
        if (newValue) {
          let zt = this.startTime.split(" "); //开始日期
          let st = "";
          //如果开始日期和结束日期都选择当天
          if (newValue.split(" ")[0] == zt[0]) {
            st = zt[1];
          } else {
            st = "00:00:00";
          }
          this.endTimeRange = st + " - 23:59:59";
        }
      },
    },
  },
  methods: {
    // 时间补0
    supplement(nn) {
      return (nn = nn < 10 ? "0" + nn : nn);
    },
    // 转换时间格式
    format(Date, str) {
      var obj = {
        Y: Date.getFullYear(),
        M: Date.getMonth() + 1,
        D: Date.getDate(),
        H: Date.getHours(),
        Mi: Date.getMinutes(),
        S: Date.getSeconds(),
      };
      // 拼接时间 hh:mm:ss
      var time =
        " " +
        this.supplement(obj.H) +
        ":" +
        this.supplement(obj.Mi) +
        ":" +
        this.supplement(obj.S);
      // yyyy-mm-dd
      if (str.indexOf("-") > -1) {
        return (
          obj.Y +
          "-" +
          this.supplement(obj.M) +
          "-" +
          this.supplement(obj.D) +
          time
        );
      }
      // yyyy/mm/dd
      if (str.indexOf("/") > -1) {
        return (
          obj.Y +
          "/" +
          this.supplement(obj.M) +
          "/" +
          this.supplement(obj.D) +
          time
        );
      }
    },
  },
};
</script>