element ui el-date-picker日期时间选择器 设置只能选择不大于30天时间范围

需求：要求日期时间选择器只能选择最多32天，其他日期为不可点击状态。

日期组件type为daterange或者datetimerange都生效

实现（vue2.x）：

通过属性picker-options

html

<el-date-picker
 v-model="dateTime"
    type="datetimerange"
    align="right"
    range-separator="- "
    start-placeholder="开始日期"
    end-placeholder="结束日期":picker-options="pickerOptions"
    @blur="isRestart = true":default-time="['00:00:00', '23:59:59']"
    value-format="yyyy-MM-dd HH:mm:ss":clearable="dateClear"
    style="width:216px;"></el-date-picker>

data

data(return{isRestart:false,pickerMinDate:'',pickerOptions:{onPick:({
                  maxDate,
                  minDate,})=>{this.isRestart =false;this.pickerMinDate = minDate.getTime();if(maxDate){this.pickerMinDate ="";}},disabledDate:(time)=>{if(this.pickerMinDate !==""){const one =32*24*3600*1000;const minTime =this.pickerMinDate - one;const maxTime =this.pickerMinDate + one;return time.getTime()< minTime || time.getTime()> maxTime;}},},})

效果

参考链接：https://www.jianshu.com/p/2a07de981fab