vue3+antdesginVue+ts a-range-picker（日期时间组件）动态选择跨度不能大于1年

要实现a-range-picker组件在Vue 3、Ant Design Vue和TypeScript环境下动态选择跨度且不能超过1年的限制，你可以监听日期选择器的变化，并在用户尝试更改日期时进行校验。如果跨度超过1年，则将其重置为1年的日期范围。

以下是一个简单的示例代码：

<template>
  <a-range-picker
    v-model:value="dateRange"
    @calendarChange="checkRange"
    format="YYYY-MM-DD"
  />
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
import { RangePickerValue } from 'ant-design-vue/es/date-picker/interface';
 
const dateRange = ref<RangePickerValue>([]);
 
const checkRange = (dates: RangePickerValue, dateStrings: [string, string]) => {
  const oneYear = 365 * 24 * 3600 * 1000; // 1年的毫秒数
  const start = new Date(dateStrings[0]).getTime();
  const end = new Date(dateStrings[1]).getTime();
 
  if (end - start > oneYear) {
    // 如果超过1年，则重置为1年的时间范围
    const newEnd = new Date(start + oneYear);
    dateRange.value = [dateStrings[0], new Date(newEnd).toISOString().split('T')[0]];
  } else {
    dateRange.value = [dateStrings[0], dateStrings[1]];
  }
};
</script>

在这个示例中，我们使用了a-range-picker的v-model:value来双向绑定日期范围，并且通过@calendarChange事件监听日期变化。在checkRange方法中，我们计算了两个日期的时间差，如果这个差值超过了一年的毫秒数，我们就将日期范围重置为一年。这样就能确保用户不能选择超过一年的日期范围。