element el-date-picker 限制範圍90天,當天不可選

<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>

效果圖:

dayer

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章