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


// html代码
 <el-date-picker
              type="daterange"
              class="time_range"
              @change="handleDateChange"
              :picker-options="pickerOptions"
              v-model="dateRange"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              clearable
            >

// 过滤规则
 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] : ''
    },
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容