a-range-picker实现可选时间范围

a-range-picker实现只能选择365天内的时间

• 使用方式:

<a-range-picker
  v-model:value="formModel.date"
  :allowClear="false"
  format="YYYY-MM-DD"
  :disabled-date="handleDisabledDate"
  :getPopupContainer="(n:HTMLElement) => n.parentNode"
  :disabled="handleDisabled"
  @change="onPickChange"
  @openChange="openPickChange"
  @calendarChange="onCalendarChange"
/>

• 相关方法

const formModel = reactive<configItem>({
  isUpdateTime: false,
  cacheDate: [],
  date: [dayjs().date(1), dayjs().subtract(1, 'day').startOf('day')]
})

/** 禁选时间 */
const handleDisabledDate = (current: dayjs.Dayjs) => {
  if (!formModel.date || !formModel.date?.length) {
    return false
  }
  const lateTime: dayjs.ConfigType = formModel.date[0] && current.diff(formModel.date[0], 'days') > 365
  const earlyTime: dayjs.ConfigType = formModel.date[1] && formModel.date[1].diff(current, 'days') > 365
  return earlyTime || lateTime
}

/** 时间更改的回调事件 */
const onPickChange = (val) => {
  formModel.date = val
  formModel.isUpdateTime = true
}

/** 日期面板变化时的回调事件*/
const onCalendarChange = (val) => {
  formModel.date = val
  formModel.isUpdateTime = true
}

/ ** 面板收起或展开的回调事件* /
const openPickChange = (open) => {
  if (open) {
    formModel.acheDate = formModel.date
    formModel.date = [] as any
  }
  if (!open && (!formModel.isUpdateTime || formModel.date?.some(v => isNil(v)))) {
    formModel.date = formModel.acheDate
    formModel.isUpdateTime = false
    return
  }
  formModel.isUpdateTime = false
}

• 以上只是简单的逻辑，真正在项目运用的时候还是得封装起来使用，方便维护与迭代。