vue3 elementPlus日期选择范围限制前后30天，开始时间可任意选择

<template>

  <el-date-picker

    v-model="rangeDate"

    type="daterange"

    start-placeholder="开始日期"

    end-placeholder="结束日期"

    range-separator="-"

    value-format="YYYY-MM-DD"

    :disabled-date="disabledDate"

    @visible-change="handleVisibleChange"

    @calendar-change="handleCalendarChange"

  />

</template>

<script setup lang="ts">

import { ref } from 'vue'

const rangeDate = ref([])

const chooseDay = ref<any>(null) // 选择的第一个日期

const handleCalendarChange = (val: [Date, null | Date]) => {

  // 选择的第一个日期

  const [chooseFirstDate] = val

  chooseDay.value = new Date(chooseFirstDate)

}

// 下拉框打开时清除选择的第一个日期，可让用户任意选择开始日期

const handleVisibleChange = (val: boolean) => {

  if (val) {

    chooseDay.value = null

  }

}

const disabledDate = (time: Date) => {

  if (!chooseDay.value) { // 选择的第一个日期不存在时可任意选择开始日期

    return false

  }

  return (

    // 限制选择的日期范围，选择第一个日期的前后30天

    time.getTime() < chooseDay.value.getTime() - 30 * 24 * 3600000 ||

    time.getTime() > chooseDay.value.getTime() + 30 * 24 * 3600000

  )

}

</script>