el-date-picker日期选择组件,限制选择区间1年,最大时间不能超过今天


// html代码
 

// 过滤规则
 pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime()
          if (maxDate) {
            this.selectDate = ''
          }
        },
        disabledDate: time => {
          // time.getTime()获取的是时间戳
          // 只能选择365天的范围且不能大于当前日期
          const choiceDateTime = new Date(this.selectDate).getTime()
          const minTime = new Date(choiceDateTime).setMonth(new Date(choiceDateTime).getMonth() - 12)
          const maxTime = new Date(choiceDateTime).setMonth(new Date(choiceDateTime).getMonth() + 12)
          const min = minTime
          const newDate = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
          const max = newDate < maxTime ? newDate : maxTime
          // 如果已经选中一个日期 则 返回 该日期前后12个月时间可选,后12个月最大为当前日期
          if (this.selectDate) {
            return time.getTime() < min || time.getTime() > max
          }
          // 若一个日期也没选中 则 返回 当前日期以前日期可选
          return time.getTime() > newDate

          // 以下写法虽然可以控制一个一年区间,但是当天的日期无法单独选中,弃用
          // if (this.selectDate !== '') {
          //   // console.log('123', this.selectDate)
          //   const one = 24 * 3600 * 1000 * 365
          //   const minTime = this.selectDate - one
          //   const maxTime = this.selectDate + one
          //   if (maxTime > Date.now()) {
          //     return (
          //       time.getTime() < minTime ||
          //       time.getTime() >
          //         new Date(new Date().toLocaleDateString()).getTime()
          //     )
          //   } else {
          //     return time.getTime() < minTime || time.getTime() > maxTime
          //   }
          // } else {
          //   return (
          //     time.getTime() >
          //     new Date(new Date().toLocaleDateString()).getTime()
          //   )
          // }
        }
      },

// 字段赋值
handleDateChange(checkedDate) {
      this.listQuery.beginTime = checkedDate ? checkedDate[0] : ''
      this.listQuery.endTime = checkedDate ? checkedDate[1] : ''
    },

你可能感兴趣的:(el-date-picker日期选择组件,限制选择区间1年,最大时间不能超过今天)