ant-design-vue 限制时间选择框,展示2天内数据且只能选择7日范围内（截止时间不得超过当日）

1、template

1
2
3
4
5
6
7
8
9
10
<a-form-item label="时间">
  <a-range-picker
    v-model="rangeTime"
    :allowClear="false"
    :disabled-date="disableDate"
    @change="onChange"
    @openChange="openChange"
    :placeholder="['开始时间', '结束时间']"
  />
</a-form-item>

2、js

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
28
29
30
// data
rangeTime: [moment(Date.now() - 1 * 24 * 3600 * 1000), moment(Date.now())],
firstSelectTime: null,


//  methods
// 日期校验
disableDate(current) {
  let nowDate = new Date()
  nowDate.setMilliseconds(0)
  nowDate.setSeconds(0)
  nowDate.setMinutes(0)
  nowDate.setHours(0)
  let isOut30 = false
  if (this.firstSelectTime) {
    if (
      current > this.firstSelectTime + 6 * 24 * 3600 * 1000 ||
      current < this.firstSelectTime - 6 * 24 * 3600 * 1000
    ) {
      isOut30 = true
    }
  }
  return current && (current > Date.now() || isOut30)
},
calendarChange(dates, dateStrings) {
  this.firstSelectTime = moment(Date.now() - 1 * 24 * 3600 * 1000)
},
openChange(status) {
  this.firstSelectTime = moment(Date.now() - 1 * 24 * 3600 * 1000)
},