背景：

        当使用antd组件库的a-range-picker组件时，有时候会对此组件在日期选择范围时进行限制，比如7天等。

实现逻辑：

实现代码：

       html：

<a-range-picker v-model:value="searchTime" class="timeInput" @change="timeChange" :show-time="false" @calendarChange="onCalendarChange" :disabled-date="disabledDate"/>

js:

import { Dayjs } from 'dayjs';
type RangeValue = [Dayjs, Dayjs];

const dates = ref<RangeValue>();
const onCalendarChange = (val) => {
  dates.value = val;
};
const disabledDate = (current: Dayjs) => {
  if (!dates.value || dates.value.length === 0) {
    return false;
  }
  const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 365; // 日期可选范围是365天
  const tooEarly = dates.value[1] && dates.value[1].diff(current, 'days') > 365;
  return tooEarly || tooLate;
};

逻辑：

        当日期发生变化时，触发了onCalendarChange方法，将获取到的值复制给dates，通过判断dates的日期是否满足disabledDate方法，此方法返回的是个布尔值，用于判断是否禁用。

html双向绑定的searchTime是日期组件显示的日期，和日期选择的这两个方法并无关联。

若有不到，请指正！