vue + element 日期时间控件只能选择此时此刻以后

1,292 阅读1分钟
<template>
<div>
	<div class="active-item">
        <div class="active-title">
          <span>*</span>
          开始时间:
        </div>
        <div class="active-value">
          </el-date-picker>
            <el-date-picker
              v-model="startTime"
              type="datetime"
              :picker-options="{
                disabledDate: (time) => {
                  return dataTime.startTimeData(time)
                },
                selectableRange: this.startTimeRange,
              }"
              :default-time="defaultTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
              placeholder="开始时间"
            ></el-date-picker>
        </div>
      </div>
      <div class="active-item">
        <div class="active-title">
          结束时间:
        </div>
        <div class="active-value">
          <el-date-picker
            v-model="endTime"
            type="datetime"
            :picker-options="{
              disabledDate: (time) => {
                return dataTime.endTimeData(time)
              },
              selectableRange: this.endTimeRange,
            }"
            :default-time="defaultTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            placeholder="结束时间"
          ></el-date-picker>
        </div>
      </div>
    </div>
</template>
  data() {
    return {
      startTime: "",
      endTime: "",
      dataTime: {
        // 开始时间范围限制
        startTimeData: (time) => {
          if (this.endTime != "") {
            return time.getTime() < Date.now()- 8.64e7 || 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";
        }
      },
    },
  },
    // 时间补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
        );
      }
    },
computed: {
//第一次点击的时候为00:00:00,是因为defalutTime默认就是00:00:00,使用defaultTime返回当前时间的时分秒,这样就可以了
    defaultTime(){
      let data = new Date()
      let h = data.getHours()
      let m = data.getMinutes()
      let s = data.getSeconds()
       return h + ":" + m + ":" + s
    }
  },