vue3项目 Element-Plus DatePicker日期选择器组件限制只能选择7天内

需求：时间选择器 只能选择7天及以内

<template>
  <el-date-picker
    v-model="valueDate"
    type="daterange"
    range-separator="⇀"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    format="YYYY-MM-DD"
    value-format="YYYY-MM-DD"
    size="large"
    :disabled-date="disabledDate"
    @calendar-change="calendarChange"
  />
</template>

<script lang="ts" setup>
import { ref } from "vue"
const valueDate = ref("")
const firstChooseDate = ref("")
const disabledDate = (time: Date) => {
  if (firstChooseDate.value) {
    const timeRange = 1 * 24 * 60 * 60 * 1000 // 1天时间戳
    const minTime = firstChooseDate.value - timeRange * 7
    const maxTime = firstChooseDate.value + timeRange * 6
    return time.getTime() <= minTime || time.getTime() > maxTime
  } else {
    return false
  }
}
const calendarChange = (val: any) => {
  firstChooseDate.value = val[0].getTime() //点击第一次选中日期
  if (val[1]) firstChooseDate.value = "" // 选中后必须清空
}
</script>

<style scoped></style>

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
31
32
33
34
35
36
37