From 9144b5bd4cd60df8db716c31c775343446e4bea0 Mon Sep 17 00:00:00 2001
From: Lumdzeehol <lumdzeehol@outlook.com>
Date: Thu, 9 Sep 2021 10:05:08 +0800
Subject: [PATCH] =?UTF-8?q?fix(Calendar):=20=E6=97=A5=E5=8E=86=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=B7=B2=E7=BB=8F=E7=A6=81=E7=94=A8=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E6=97=A5=E6=9C=9F=E4=BE=9D=E7=84=B6=E5=8F=AF=E4=BB=A5=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E6=97=A5=E6=9C=9F=E5=8C=BA=E9=97=B4=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=20(#9361)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* feat: expose disabledDays from calendarMonth

Co-authored-by: lumdzeehol <lumdzeehol@163.com>
---
 packages/vant/src/calendar/Calendar.tsx      | 33 +++++++++++++++++++-
 packages/vant/src/calendar/CalendarMonth.tsx |  5 +++
 packages/vant/src/calendar/types.ts          |  3 +-
 3 files changed, 39 insertions(+), 2 deletions(-)

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) => (
       <CalendarDay
         v-slots={pick(slots, ['top-info', 'bottom-info'])}
@@ -265,6 +269,7 @@ export default defineComponent({
       getHeight: () => 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<ComputedRef<CalendarDayItem[]>>;
   }
 >;