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

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

实现（vue2.x）：

通过属性picker-options

html

<el-date-pickerv-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