el-date-picker 跨度30天

要实现el-date-picker跨度30天的效果，可以根据引用中的代码进行修改。首先，在el-date-picker的属性中添加一个:picker-options="pickerOptions"，然后在data中定义一个pickerOptions对象，它包括一个onPick方法和一个disabledDate方法。在onPick方法中，我们可以获取到选中的时间范围，将其保存在pickDate变量中。在disabledDate方法中，我们可以比较选中的时间范围与当前日期的差值，如果超过30天，则返回true，禁用这个日期。最后，在methods中添加getPickDate和disabledDate两个方法，具体实现如下：

export default {
  data() {
    return {
      pickDate: {}, // 选中时间
      pickerOptions: {
        onPick: this.getPickDate,
        disabledDate: this.disabledDate
      }
    }
  },
  methods: {
    getPickDate(pick) {
      this.pickDate = pick
    },
    disabledDate(date) {
      const { minDate, maxDate } = this.pickDate
      if (minDate && !maxDate) {
        const diff = Math.abs(minDate.valueOf() - date.valueOf())
        if (diff > 1000 * 3600 * 24 * 30) {
          return true
        }
      }
    }
  }
}

这样，当用户选择时间范围时，只能选择跨度为30天的日期范围。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [处理Element 日期选择器el-date-picker 限制时间跨度一年](https://blog.csdn.net/qq_37831545/article/details/125522722)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [el-date-picker最大跨度一年组件封装](https://blog.csdn.net/weixin_43917792/article/details/116003776)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]