elementUI日期时间组件如何限制只能选择当前时刻的前三天

一、使用时间日期组件

<el-form-item label="时间" >
    <el-date-picker
        v-model="value1"
        type="datetime"
        placeholder="开始时间"
        size="small"
        :clearable="false"
        :picker-options="pickerOptions"
        />-
     <el-date-picker
        v-model="value2"
        type="datetime"
        placeholder="结束时间"
        size="small"
        :clearable="false"
        :picker-options="pickerOptionsData"
        />
</el-form-item>

因为这个我是界面搜索用的，所以在搜索的时候需要首先判断一下，选择的时候开始日期不能大于结束日期 

在搜索框中进行判断
if (this.value1.getTime() > this.value2.getTime()) {
    this.$message.error('开始时间不能大于结束时间');
    return;
}

接下来对时间做出限制，首先这里需要用到picker-options方法以及使用watch监听。其中selectableRange方法是对时分秒的禁用。

//在data方法中使用pickerOptions方法
data() {
    return {
         pickerOptions: {
          disabledDate(time) {
          return (
            time.getTime() < Date.now() - 4 * 24 * 60 * 60 * 1000 ||
            time.getTime() > Date.now()
          );
        },
        selectableRange:
          new Date().getHours() +
          ":" +
          new Date().getMinutes() +
          ":" +
          new Date().getSeconds() +
          "- 23:59:59",
      },
    }
}

上面的内容只是设置前三天的日期的禁用，要是涉及到时分秒还需要在watch里面进一步进行监听。

watch: {
    // 动态的监听来改变禁用的时间
    value1: {
      handler(newVal, oldVal) {
        let newS = new Date(new Date().getTime() - 3 * 1000 * 60 * 60 * 24);
        //这里判断是不是当前时刻的前三天
        if (
          newVal &&
          newVal.getFullYear() == newS.getFullYear() &&
          newVal.getMonth() == newS.getMonth() &&
          newVal.getDate() == newS.getDate()
        ) {
          //如果为三天前的时刻，则当前时分秒之前的都无法选择。
          this.pickerOptions.selectableRange =
            new Date().getHours() +
            ":" +
            new Date().getMinutes() +
            ":" +
            new Date().getSeconds() +
            " - 23:59:00";

          if (newVal.getTime() < newS.getTime()) {
            this.value1 = newS;
          }
        //判断是否是今天
        } else if (
          newVal &&
          newVal.getFullYear() == new Date().getFullYear() &&
          newVal.getMonth() == new Date().getMonth() &&
          newVal.getDate() == new Date().getDate()
        ) {
          //如果是今天则当前时刻之后的时分秒无法进行选择
          this.pickerOptions.selectableRange =
            "00:00:00 -" +
            new Date().getHours() +
            ":" +
            new Date().getMinutes() +
            ":" +
            new Date().getSeconds();
          if (newVal.getTime() > new Date().getTime()) {
            this.value1 = new Date();
          }
        } else {
           //三天之前那天跟今天之外的之间时间的时分秒不做限制
          this.pickerOptions.selectableRange = "00:00:00 - 23:59:00";
        }
      },
    },
}

注意：在使用的时候发现，譬如现在是2023/08/11 10:13:17,若先选择时间日期为2023/08/11,时分秒选择的是08:22:22 点击 确定按钮，再去选择时间为2023/08/08，会发现08:22:22 是属于禁用时间但是还在并未清空，导致禁用时间可以被使用，所以在watch的时候加了两个判断。

if (newVal.getTime() < newS.getTime()) {
    this.value1 = newS;
}



if (newVal.getTime() > new Date().getTime()) {
    this.value1 = new Date();
}

当选择的时间为三天前，时分秒为当前时刻之前的时间则自动变成现在的时刻，选择今天，当前时刻之后的时间则自动转换成当前时刻的内容。其中我发现时间日期组件的秒是无法禁用的，有人知道为什么吗？欢迎大家一起来讨论。

以上内容就是时间日期组件的禁用。