diff --git a/packages/vant/src/calendar/Calendar.tsx b/packages/vant/src/calendar/Calendar.tsx index 8c1ff7c61..03c0a7c33 100644 --- a/packages/vant/src/calendar/Calendar.tsx +++ b/packages/vant/src/calendar/Calendar.tsx @@ -368,6 +368,26 @@ export default defineComponent({ } }; + // get first disabled calendarDay between date range + const getDisabledDate = ( + disabledDays: CalendarDayItem[], + startDay: Date, + date: Date + ): Date | undefined => + disabledDays.find( + (day) => + compareDay(startDay, day.date!) === -1 && + compareDay(day.date!, date) === -1 + )?.date; + + // disabled calendarDay + const disabledDays = computed(() => + monthRefs.value.reduce((arr, ref) => { + arr.push(...(ref.disabledDays?.value ?? [])); + return arr; + }, [] as CalendarDayItem[]) + ); + const onClickDay = (item: CalendarDayItem) => { if (props.readonly || !item.date) { return; @@ -388,7 +408,18 @@ export default defineComponent({ const compareToStart = compareDay(date, startDay); if (compareToStart === 1) { - select([startDay, date], true); + const disabledDay = getDisabledDate( + disabledDays.value, + startDay, + date + ); + + if (disabledDay) { + const lastAbledEndDay = getPrevDay(disabledDay); + select([startDay, lastAbledEndDay]); + } else { + select([startDay, date], true); + } } else if (compareToStart === -1) { select([date]); } else if (props.allowSameDay) { diff --git a/packages/vant/src/calendar/CalendarMonth.tsx b/packages/vant/src/calendar/CalendarMonth.tsx index be7b3b7fb..9635c2de7 100644 --- a/packages/vant/src/calendar/CalendarMonth.tsx +++ b/packages/vant/src/calendar/CalendarMonth.tsx @@ -241,6 +241,10 @@ export default defineComponent({ return days; }); + const disabledDays = computed(() => + days.value.filter((day) => day.type === 'disabled') + ); + const renderDay = (item: CalendarDayItem, index: number) => ( height.value, setVisible, scrollIntoView, + disabledDays, }); return () => ( diff --git a/packages/vant/src/calendar/types.ts b/packages/vant/src/calendar/types.ts index 64593854c..9afdf52f2 100644 --- a/packages/vant/src/calendar/types.ts +++ b/packages/vant/src/calendar/types.ts @@ -1,4 +1,4 @@ -import type { ComponentPublicInstance } from 'vue'; +import type { ComponentPublicInstance, ComputedRef, Ref } from 'vue'; import type { CalendarProps } from './Calendar'; import type { CalendarMonthProps } from './CalendarMonth'; @@ -43,5 +43,6 @@ export type CalendarMonthInstance = ComponentPublicInstance< getHeight: () => number; setVisible: (value?: boolean | undefined) => void; scrollIntoView: (body: Element) => void; + disabledDays: Ref>; } >;