fix(Calendar): should scroll to current date instead of current month (#9949)

packages/vant/src/calendar/Calendar.tsx

@@ -270,7 +270,7 @@ export default defineComponent({
         months.value.some((month, index) => {
           if (compareMonth(month, targetDate) === 0) {
             if (bodyRef.value) {
-              monthRefs.value[index].scrollIntoView(bodyRef.value);
+              monthRefs.value[index].scrollToDate(bodyRef.value, targetDate);
             }
             return true;
           }
@@ -282,8 +282,7 @@ export default defineComponent({
       });
     };
 
-    // scroll to current month
-    const scrollIntoView = () => {
+    const scrollToCurrentDate = () => {
       if (props.poppable && !props.show) {
         return;
       }
@@ -308,13 +307,13 @@ export default defineComponent({
         // add Math.floor to avoid decimal height issues
         // https://github.com/youzan/vant/issues/5640
         bodyHeight = Math.floor(useRect(bodyRef).height);
-        scrollIntoView();
+        scrollToCurrentDate();
       });
     };
 
     const reset = (date = getInitialDate()) => {
       currentDate.value = date;
-      scrollIntoView();
+      scrollToCurrentDate();
     };
 
     const checkRange = (date: [Date, Date]) => {
@@ -538,7 +537,7 @@ export default defineComponent({
       () => props.defaultDate,
       (value = null) => {
         currentDate.value = value;
-        scrollIntoView();
+        scrollToCurrentDate();
       }
     );
 

packages/vant/src/calendar/CalendarMonth.tsx

@@ -89,15 +89,6 @@ export default defineComponent({
 
     const getTitle = () => title.value;
 
-    const scrollIntoView = (body: Element) => {
-      const el = props.showSubtitle ? daysRef.value : monthRef.value;
-
-      if (el) {
-        const scrollTop = useRect(el).top - useRect(body).top + body.scrollTop;
-        setScrollTop(body, scrollTop);
-      }
-    };
-
     const getMultipleDayType = (day: Date) => {
       const isSelected = (date: Date) =>
         (props.currentDate as Date[]).some(
@@ -239,6 +230,20 @@ export default defineComponent({
       days.value.filter((day) => day.type === 'disabled')
     );
 
+    const scrollToDate = (body: Element, targetDate: Date) => {
+      if (daysRef.value) {
+        const daysRect = useRect(daysRef.value);
+        const totalRows = placeholders.value.length;
+        const currentRow = Math.ceil((targetDate.getDate() + offset.value) / 7);
+        const rowOffset = ((currentRow - 1) * daysRect.height) / totalRows;
+
+        setScrollTop(
+          body,
+          daysRect.top + rowOffset + body.scrollTop - useRect(body).top
+        );
+      }
+    };
+
     const renderDay = (item: CalendarDayItem, index: number) => (
       <CalendarDay
         v-slots={pick(slots, ['top-info', 'bottom-info'])}
@@ -262,7 +267,7 @@ export default defineComponent({
       getTitle,
       getHeight: () => height.value,
       setVisible,
-      scrollIntoView,
+      scrollToDate,
       disabledDays,
     });
 

packages/vant/src/calendar/types.ts

@@ -42,7 +42,7 @@ export type CalendarMonthInstance = ComponentPublicInstance<
     getTitle: () => string;
     getHeight: () => number;
     setVisible: (value?: boolean | undefined) => void;
-    scrollIntoView: (body: Element) => void;
+    scrollToDate: (body: Element, targetDate: Date) => void;
     disabledDays: Ref<ComputedRef<CalendarDayItem[]>>;
   }
 >;