element-时间选择器单独写两个时间选择器并按照规则进行置灰选择，精确到时分秒

项目场景：

要求：

开始时间和结束时间可以分开搜索，所以组件自带的时间范围选择器不适用
开始时间和结束时间超过当前时间置灰不可选择
开始时间不可选择结束时间之后的时间
结束时间不可选择开始时间之前的时间

代码实例

javascript 复制代码

 <el-form-item>
        <div class="theme-date">
          <div class="theme-date-prepend">任务开始/结束时间</div>
          <el-date-picker
            type="datetime"
            placeholder="选择任务开始日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="form.startTime"
          ></el-date-picker>
          <span style="padding: 0 2px">至</span>
          <el-date-picker
            type="datetime"
            placeholder="选择任务结束日期"
            :picker-options="pickerOptions1"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="form.endTime"
          ></el-date-picker>
        </div>
      </el-form-item>

javascript 复制代码

data中声明两个参数
startTimeSelectableRange: "00:00:00-23:59:59",
endTimeSelectableRange: "00:00:00-23:59:59",

javascript 复制代码

computed: {
    pickerOptions() {
      const that = this;
      return {
        disabledDate(time) {
          if (that.form.endTime && that.form.endTime !== "") {
            return (
              time.getTime() > new Date(that.form.endTime).getTime() ||
              time.getTime() > new Date()
            );
          }
          return time.getTime() > new Date();
        },
        selectableRange: that.startTimeSelectableRange,
      };
    },
    pickerOptions1() {
      const that = this;
      return {
        disabledDate(time) {
          if (that.form.startTime && that.form.startTime !== "") {
            return (
              time.getTime() + 3600 * 1000 * 24 <
              new Date(that.form.startTime).getTime()
            );
          }
        },
        selectableRange: that.endTimeSelectableRange,
      };
    },
  },

重要的是要对开始时间和结束时间进行监听

javascript 复制代码

 watch: {
    "form.startTime": {
      handler(newVal) {
        // 判断是不是选择的当天,去置灰当天当时当秒之后的置灰操作
        if (
          newVal &&
          new Date(newVal).getFullYear() === new Date().getFullYear() &&
          new Date(newVal).getMonth() === new Date().getMonth() &&
          new Date(newVal).getDate() === new Date().getDate()
        ) {
          this.startTimeSelectableRange = `00:00:00 - ${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}`;
        }
        // 判断是不是选择的结束时间的当天,如果是,那就要将选择的结束时间后的时间进行置灰不可选择
        if (
          this.form.endTime &&
          new Date(newVal).getFullYear() ===
            new Date(this.form.endTime).getFullYear() &&
          new Date(newVal).getMonth() ===
            new Date(this.form.endTime).getMonth() &&
          new Date(newVal).getDate() === new Date(this.form.endTime).getDate()
        ) {
          this.startTimeSelectableRange = `00:00:00 - ${new Date(
            this.form.endTime
          ).getHours()}:${new Date(this.form.endTime).getMinutes()}:${new Date(
            this.form.endTime
          ).getSeconds()}`;
        }
      },
    },
    "form.endTime": {
      handler(newVal) {
        // 判断是不是选择的当天,去置灰当天当时当秒之后的置灰操作
        if (
          newVal &&
          new Date(newVal).getFullYear() === new Date().getFullYear() &&
          new Date(newVal).getMonth() === new Date().getMonth() &&
          new Date(newVal).getDate() === new Date().getDate()
        ) {
          this.endTimeSelectableRange = `00:00:00 - ${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}`;
        }
        // 判断是不是选择的开始时间的当天,如果是,那就要将选择的结束时间前的时间进行置灰不可选择
        if (
          this.form.startTime &&
          new Date(newVal).getFullYear() ===
            new Date(this.form.startTime).getFullYear() &&
          new Date(newVal).getMonth() ===
            new Date(this.form.startTime).getMonth() &&
          new Date(newVal).getDate() === new Date(this.form.startTime).getDate()
        ) {
          this.endTimeSelectableRange = `${new Date(
            this.form.startTime
          ).getHours()}:${new Date(
            this.form.startTime
          ).getMinutes()}:${new Date(
            this.form.startTime
          ).getSeconds()} - 23:59:59`;
        }
      },
    },
  },