element el-date-picker is limited to 90 days, the day is not selectable

<template>
    <div class="table">
        <div class="crumbs">
            <el-row class="search_con" :gutter="24" style="margin-bottom:20px;display: flex;align-items: center;">
                <el-col :span="3" style="padding-right: 0px;width:81px;">
                  <label style="color:#333;font-size: 14px;">统计日期:</label>
                </el-col>
                <el-col :span="5">
                  <el-date-picker
                    :clearable="false"
                    :editable="false"
                    v-model="datePick"
                    type="daterange"
                    placeholder="选择日期范围"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    @change="formatDate">
                  </el-date-picker>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    let that = this
    let _minTime = null
    let _maxTime = null
    return {
      datePick: '',
      params: {
          startTime: '', // 开始时间
          endTime: '', // 结束时间
      },
      pickerOptions: {
        onPick(time){
          if (!time.maxDate) {
            let timeRange = 89*24*3600*1000
            _minTime = time.minDate.getTime() // 最小时间
            _maxTime = time.minDate.getTime() + timeRange // 最大时间
          } else {
            _minTime = _maxTime = null
          }
        },
        disabledDate(time) {
          let afterToday = Date.now() - 3600 * 1000 * 24
          if (_maxTime) {
            _maxTime = (_maxTime <= afterToday) ? _maxTime : afterToday 
          } else {
            return time.getTime() > (Date.now() - 3600 * 1000 * 24)
          }
          if (_minTime && _maxTime) {
            return time.getTime() < _minTime || time.getTime() > _maxTime
          }
        },
        shortcuts: [{
          text: '最近7天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近15天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近30天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  methods: {
    //设置默认日期7天
    defaultDate (){
      let start = new Date().getTime() - 3600 * 1000 * 24 * 7
      let end = new Date().getTime() - 3600 * 1000 * 24
      this.datePick = [start, end]
    },
    formatDate (val) {
      let arr = val.split('至')
      this.params.startTime = arr[0]
      this.params.endTime = arr[1]
    },
  },
  mounted() {
    this.defaultDate()
  }
}
</script>
<style lang="less" scoped>
</style>

Effect picture:

dayer

Guess you like

Origin blog.csdn.net/WDCCSDN/article/details/100662023