支持指定可选范围 日期选择器

1、效果

1、模板

<el-date-picker
    v-model="dateRange"
    :picker-options="pickerOptions"
    :clearable="false"
    :style="{width: 200px}"
    type="daterange"
    @focus="pickerOptions.onFocus"
    :default-time="['00:00:00','23:59:59']"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期">
 </el-date-picker>

2、组件

data() {
  return {
     dateRange: [],
     maxRange: 6, // 默认可选范围7天
     disableFuture: true, // 是否禁用未来的日期
     
     pickerOptions : {
        // ----customProp--start--
        disabledRange:[],
        onFocus: () =>  {
          this.pickerOptions.disabledRange = []
        },
        // ----customProp--end----

        onPick: (time) => {
          if (this.maxRange && !time.maxDate) {
            const timeRange = this.maxRange * 8.64e7
            const min = time.minDate.getTime() - timeRange
            const max = time.minDate.getTime() + timeRange
            const maxDate = this.disableFuture 
              ? Math.min(max, new Date().setHours(23, 59, 59, 0))
              : max
            this.pickerOptions.disabledRange = [min, maxDate]
          } else {
            this.pickerOptions.disabledRange = []
          }
        },

        disabledDate: (time) => {
          const pickerDate = time.getTime()
          const [min, max] = this.pickerOptions.disabledRange
          if (min && max) {
            return pickerDate < min || pickerDate > max
          } else if(this.disableFuture){
            return pickerDate > new Date().setHours(23, 59, 59, 0)
          }
          return false;
        }
      }
  }
}
 

3、优化

选择器获取焦点时，需要清空disabledRange使用户可以重选日期，需要清除disabledRange数据； 如果disabledRange放在Vue全局属性下，选择期获取焦点时无法清除，这里暂时使用pickerOptions自定义disabledRange属性来用于清除data-picker缓存