elementUI 日期选择器怎么限制可选取的日期范围？

这个问题来源于一个需求：仅支持查询起止时间跨度为30天内的消息，例如2020-07-01至2020-07-31

正常使用 DatePicker 日期选择器时选择的时间范围是任意的，也就是说需要对可选取的时间范围进行限制。查了一下官网的属性，并没有支持可以直接设置选取范围的。

只能使用这个属性来完成了：

直接放代码👇

<el-date-picker
  v-model="date"
  type="daterange"
  value-format="yyyy-MM-dd"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  :picker-options="pickerOptions"
/>

export default {
	data() {
    let minTime = null
    let maxTime = null
    return {
      pickerOptions: {
        onPick(time) {
          //选择了一个时间
          if (!time.maxDate) {
            const timeRange = 30 * 24 * 60 * 60 * 1000 // 30天
            minTime = time.minDate.getTime() - timeRange // 最小时间
            maxTime = time.minDate.getTime() + timeRange // 最大时间
          // 选完两个时间，就清空本次范围判断数据
          } else {
            minTime = maxTime = null
          }
        },
        disabledDate(time) {
          // onPick后触发
          // 该方法会轮询，返回false表示该日期禁选
          if (minTime && maxTime) {
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      },
      value: ''
}

搞定，现在选择完一个日期后，该日期后30天和前30天都是禁选状态了：