日期选择组件封装，限制时间范围

父组件

<template v-if="time === 5">
      <div v-if="v_hostname_selected === 'all'">
            <rangeDataPicker ref='child' :period=period  :pickerOptions=pickerOptions @getperiod=getperiod></rangeDataPicker>
          </div>
          <div v-if="v_hostname_selected !== 'all'">
            <rangeDataPicker ref='child' :period=period ></rangeDataPicker>
          </div>
</template>
<script>

</script>
export default{
  data(){
    return{
      pickerOptions:{
        onPick(time){
          if (!time.maxDate) {
            let timeRange = 30*24*60*60*1000  // 30天
            _minTime = time.minDate.getTime() - timeRange // 最小时间
            _maxTime = time.minDate.getTime() + timeRange // 最大时间
          } else {
            _minTime = _maxTime = null
          }
        },
        disabledDate(time) {
          if(_minTime && _maxTime){
            return time.getTime() < _minTime || time.getTime() > _maxTime
          }
        }
      },
    }
  },
}

子组件

<template>
  <el-date-picker 
    class="select-box"
    @change="changeperiod"
    :picker-options="pickerOptions"
    v-model="periodvalue"
    value-format='yyyy-MM-dd HH:mm:ss'
    type="datetimerange"
>
  </el-date-picker>
</template>
<script>
export default {
  name: 'range-data-picker',
  props:{
    period:Array,
    pickerOptions:{
      type:Object,
      required: false,
      default:()=>{
        return{
          onPick(){
          },
          disabledDate() {
            return null
          }
        }
      },
    },
  },
  data(){
    return{
      periodvalue:this.period
    }
  },
  watch:{
    period:function(newValue){
      this.periodvalue = newValue
    }
  },
  methods:{
    changeperiod(){
      this.$emit('getperiod',this.periodvalue)
    },
  }
}
</script>