fix(Calendar): 日历组件已经禁用部分日期依然可以选择日期区间问题 (#9361)

* fix: Calendar 日历组件已经禁用部分日期依然可以选择日期区间问题

* feat: expose disabledDays from calendarMonth

Co-authored-by: lumdzeehol <lumdzeehol@163.com>

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) {

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) => (
       <CalendarDay
         v-slots={pick(slots, ['top-info', 'bottom-info'])}
@@ -265,6 +269,7 @@ export default defineComponent({
       getHeight: () => height.value,
       setVisible,
       scrollIntoView,
+      disabledDays,
     });
 
     return () => (

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<ComputedRef<CalendarDayItem[]>>;
   }
 >;