Vue3+ElementPlus el-date-picker时间选择器，设置最多选择60天区间内，必须选择大于今天

Vue3+ElementPlus el-date-picker时间选择设置，

1. 必须选择大于今天；
2. 最多选择60天区间内；

使用disabled-date：

具体实现代码：

    <el-date-picker
          v-model="state.queryParams.dateTime"
          :editable="false"
          :clearable="false"
          style="width: 240px"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="-"
          :disabled-date="disabledDateFun"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="changeTime"
        />

--------
--------
--------
// 最多选择60天区间以内
const disabledDateFun = (time: Record<string, any>): boolean => {
  console.log(time) // time 为new Date()类型
  const secondNum = 60 * 60 * 24 * 60 * 1000 //上下波动60天
  if (time.getTime() > new Date().getTime()) {
    return time.getTime() >= new Date().getTime() //时间范围必须大于今天
  } else {
    return time.getTime() < Date.now() - secondNum
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27