elementUI的datepicker选择完起始日期后，结束日期不能距离起始日期不能超过31天，请写出代码示例<script lang="ts" setup>

Element UI 的 DatePicker 组件本身并不直接提供这样的功能，但你可以通过自定义一些逻辑并在 `v-model` 对象上做处理来实现这个限制。这里是一个简单的 TypeScript 示例，假设你在 Vue 3 的 `setup` 中使用 Composition API：

<template>
  <el-date-picker
    v-model="dateRange"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :disabled-days="disabledDays"
    @input="handleDateChange"
  ></el-date-picker>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'

// 定义日期范围模型
const dateRange = ref<{ start: Date; end: Date }>({ start: new Date(), end: null });

// 自定义函数检查日期是否超出限制
function checkDateRange(date: Date) {
  if (dateRange.value.end && date > dateRange.value.end.add(1, 'day')) {
    // 如果已经选定了结束日期，并且新日期超过了结束日期加一天，则不允许选择
    return false;
  }
  return true;
}

// 初始化禁用列表（默认不禁止）
const disabledDays: Record<Date | number, boolean> = {};

// 事件处理器
function handleDateChange({ start, end }) {
  if (start && end) {
    const startDate = new Date(start);
    const endDate = new Date(end);

    // 检查结束日期是否超出限制
    if (!checkDateRange(endDate)) {
      dateRange.value.end = startDate;
    } else {
      dateRange.value.end = endDate;
    }
  }
}

onMounted(() => {
  // 当用户输入日期后立即检查
  dateRange.value.start.addEventListener('change', () => {
    dateRange.value.end = checkDateRange(dateRange.value.start)
      ? new Date()
      : dateRange.value.start;
  });
});

// 监听日期变化并应用限制
useEffect(() => {
  dateRange.value.end = checkDateRange(dateRange.value.end)
    ? dateRange.value.end
    : dateRange.value.start;
}, [dateRange]);

// 相关问题--