el-date-picker 禁用一个月前、一个月后（当天之后）的时间 datetimerange

功能需求

时间范围选择器，最大时间选择尺度为一个月。

今天是 2025-01-09

示例1

选择 2025-01-02 日
禁用未来日期（2025-01-09之后日期）
禁用上月2号（31日之前）之前的日期

示例2

选择2024-12-02
禁用31日之前日期
禁用31日之后日期

代码 Vue2

<template>
  <el-date-picker
    v-model="dates"
    type="datetimerange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :picker-options="pickerOptions"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      dates: [],
      currentTime: '',
      pickerOptions: {
        onPick: ({minDate, maxDate}) => {
          if (maxDate) {
            this.currentTime = ''
            return
          }
          this.currentTime = minDate.getTime()
        },
        disabledDate: (time) => {
          const now = new Date()
          // 禁用当前时间之后的时间
          if (time.getTime() > now) return true

          // 禁用今天23:59:59 之后的时间；如果没有时、分、秒选择器，则不需要对时分秒进行特殊处理
          // if (time.getTime() > new Date(now.toLocaleDateString() + ' 23:59:59')) return true

          const limitDays = 31 * 24 * 3600 * 1000
          const minTime = this.currentTime - limitDays
          const maxTime = this.currentTime + limitDays

          // 禁用一月之前的时间
          if (time.getTime() < minTime) return true
          // 禁用一月之后 ｜｜ 当前时间今天之后的时间
          // 添加this.currentTime判断： 如果未选择开始日期 或者 选择了结束时间时 this.currentTime 是 空的，
          if (this.currentTime && time.getTime() > maxTime) return true
          return false
        }
      }
    };
  },
  
  methods: {
    checkDisabled(date) {
      // 检查是否超过当前日期一个月
      const oneMonthLater = new Date(this.currentDate);
      oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);
      if (date >= oneMonthLater) {
        this.disabledDays.push(date);
      }
    },
  },
  watch: {
    dates(newDates) {
      // 当日期范围改变时，更新禁用日期和当前日期
      this.currentDate = newDates[1];
      this.checkDisabled(newDates[0]);
      this.checkDisabled(newDates[1]);
      
      // 清空已禁用的未来日期
      this.disabledDays = [];
      for (let date of this.dates) {
        this.checkDisabled(date);
      }
    },
  },
};
</script>