Element-ui date-picker日期范围为一个月 ---------基于vue

运用disabledDate设置禁选日期，范围为一个月， 超出禁用当前日期之后禁用
如图:

以下为日期组件代码：

<template>
  <el-date-picker v-model="exCheckDate" type="daterange" :picker-options="pickerOptions" class="datePickers"
    value-format="yyyy-MM-dd" @change="changeDatePicker(exCheckDate)" @focus="changeDatefocus" :editable="false"
    size='small' :style="{width:width+60+'px'}" start-placeholder="开始日期" end-placeholder="结束日期">
  </el-date-picker>
</template>
<script>
  export default {
    props: {
      value: {
        type: [Array],
        required: true,
        default: []
      },
      nowNum:{
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        width: 150,
        exCheckDate: [],
        minDate: '',
        maxDate: '',
        pickerOptions: {
          onPick: ({
            maxDate,
            minDate
          }) => {
            this.maxDate = maxDate;
            this.minDate = minDate;
          },
          disabledDate: (date) => {
            let maxDate = this.maxDate;
            let minDate = this.minDate;
            let endTime = '';
            if (minDate) {
              let val = Date.now() - (new Date(this.minDate).valueOf() + 30 * 24 * 60 * 60 * 1000);
              if (val < 0) {
                endTime = Date.now() - this.nowNum * 24 * 60 * 60 * 1000
                // this.nowNum == 1时不包含当前日期， this.nowNum == 0时包含当前日期
              } else {
                endTime = (new Date(this.minDate).valueOf() + 30 * 24 * 60 * 60 * 1000);
              }
              if (minDate && maxDate) {
                return date && (date.valueOf() > endTime)
              }
              return date && (date.valueOf() > endTime || date.valueOf() < minDate.valueOf() - 30 * 24 * 60 * 60 *
                1000)
            } else {
              return date && (date.valueOf() > Date.now() - this.nowNum * 24 * 60 * 60 * 1000)
            }
          }
        },
      }
    },
    methods: {
      changeDatePicker() {
        if (!this.exCheckDate) {
          this.minDate = '';
          this.maxDate = '';
          return
        }
        this.$emit('input', this.exCheckDate);
        this.$emit('change', this.exCheckDate);
      },
      changeDatefocus() {
        this.exCheckDate = []
        this.minDate = '';
        this.maxDate = '';
      },
    },
  }

</script>

用法：

//组件引入
 import DatePicke from './DataPicker.vue'
//注册
components:{
      DatePicke
    },
<date-picke v-model="exCheckDate" @change="changeDate"></date-picke>