element 日期组件限制可选日期为过去的某个月并且范围为这个月内的某一个时间段-优快云博客

本文链接：https://blog.youkuaiyun.com/nrskhdzl/article/details/125605639

本文介绍了一个使用 Element UI 的日期选择器组件实现特定日期范围选择的方法。通过定义 disabledDate 函数来限定用户只能选择指定范围内的日期，同时确保本月及未来的日期不可选。此外，还通过失焦事件 dateBlur 来解决可能存在的选择日期后的校验失效问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <el-date-picker
          v-model="searchTime"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyyMMdd"
          :picker-options="expireTimeOPtion"
          @blur="dateBlur"
          :clearable="false"
        >
        </el-date-picker>

限制部分的代码

     selectDate: "",//选择的时间
     expireTimeOPtion: {  //日期选择范围在开始日期的当月内，并且本月及未来日期不可选
        onPick: ({ minDate }) => {
          this.selectDate = minDate;
        },
        disabledDate: (time) => {
          let myDate = new Date();
          let t = myDate.getDate();
          // 如果想包含本月本月 - 8.64e7 * t 就不需要了，
          if (this.selectDate !== "") {
            const minTime = this.$moment(this.selectDate)
              .startOf("month")
              .valueOf();
            const maxTime = this.$moment(this.selectDate)
              .endOf("month")
              .valueOf();
            return (
              time.getTime() < minTime ||
              time.getTime() > maxTime ||
              time.getTime() > Date.now() - 8.64e7 * t
            );
          } else {
            return time.getTime() > Date.now() - 8.64e7 * t;
          }
        },
      },

防止用户通过输入日期而导致校验失效或者没有清空第一次选择的最小日期而影响下一次选择日期时的禁选，可以设置失焦事件，每次失焦时清空选择的值

dateBlur() {
      //不管什么情况只要日期控件失焦就清空特定日期
      this.selectDate = "";
    },

element 日期组件限制可选日期为过去的某个月 并且范围为这个月内的某一个时间段

element 日期组件限制可选日期为过去的某个月并且范围为这个月内的某一个时间段