el-date-picker 限制只能选择一月，只能选择今天之前的日期。

最新推荐文章于 2025-03-01 15:00:33 发布

原创最新推荐文章于 2025-03-01 15:00:33 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript #elementui

文章介绍了如何使用Vue的el-date-picker组件实现日期时间范围选择，并设置了限制条件，如最大日期和一个月内的选择范围。开发者展示了pickerOptions配置中的onPick和disabledDate方法来管理日期选择行为。

<el-date-picker
          v-model="form.time"
          placeholder="请选择"
          unlink-panels
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          :picker-options="pickerOptions"
        />

  // 日期时间范围在一个月以内
      pickerOptions: {
        onPick: ({
          maxDate,  // 选择的日期范围的最大日期
          minDate // 选择的日期范围的最小日期
        }) => {
          this.selectDate = minDate.getTime()  // 将最小日期的时间戳存储在selectDate变量中
          if (maxDate) {
            this.selectDate = '' // 如果存在最大日期，则将selectDate重置为空字符串
          }
        },
        disabledDate: (time) => {
          // 如果日期的时间戳大于等于当前时间的时间戳
          if (time.getTime() >= new Date().getTime()) {
            return true // 禁用该日期 今天之后的时间不可选
          }
          if (this.selectDate !== '') {
            const one = 30 * 24 * 3600 * 1000 //  一个月的时间间隔（毫秒数）
            // 最小时间和最大时间
            const minTime = this.selectDate - one
            const maxTime = this.selectDate + one
            // 如果 time 的时间戳小于最小时间或大于最大时间，则禁用该日期
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      }