CalendarPickerView设置min值&&value/defaultValue时，视图优先渲染value/defaultValue值，新增scrollTo API支持跳转到指定日期

src/components/calendar-picker-view/calendar-picker-view.tsx

@@ -3,6 +3,8 @@ import React, {
   useState,
   useImperativeHandle,
   useMemo,
+  useRef,
+  useEffect,
 } from 'react'
 import type { ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
@@ -28,6 +30,7 @@ const classPrefix = 'adm-calendar-picker-view'
 export type CalendarPickerViewRef = {
   jumpTo: (page: Page | ((page: Page) => Page)) => void
   jumpToToday: () => void
+  scrollTo: (page: Page) => void
   getDateRange: () => DateRange
 }
 
@@ -76,6 +79,7 @@ export const CalendarPickerView = forwardRef<
   CalendarPickerViewRef,
   CalendarPickerViewProps
 >((p, ref) => {
+  const rootRef = useRef<HTMLDivElement>(null)
   const today = dayjs()
   const props = mergeProps(defaultProps, p)
   const { locale } = useConfig()
@@ -106,6 +110,19 @@ export const CalendarPickerView = forwardRef<
     dayjs(dateRange ? dateRange[0] : today).date(1)
   )
 
+  const scrollTo = (page: Page) => {
+    const cell = rootRef.current?.querySelector(
+      `[data-date="${convertPageToDayjs(page).format('YYYY-MM')}"`
+    )
+    if (cell && cell.scrollIntoView) {
+      cell.scrollIntoView()
+    }
+  }
+
+  useEffect(() => {
+    scrollTo({ year: current.year(), month: current.month() + 1 })
+  }, [current])
+
   useImperativeHandle(ref, () => ({
     jumpTo: pageOrPageGenerator => {
       let page: Page
@@ -120,9 +137,11 @@ export const CalendarPickerView = forwardRef<
       setCurrent(convertPageToDayjs(page))
     },
     jumpToToday: () => {
-      setCurrent(dayjs().date(1))
+      const curr = dayjs().date(1)
+      setCurrent(curr)
     },
     getDateRange: () => dateRange,
+    scrollTo: scrollTo,
   }))
 
   const header = (
@@ -153,9 +172,9 @@ export const CalendarPickerView = forwardRef<
         year,
         month: month + 1,
       }
-
+      const dateId = dayjs(year + '-' + (month + 1)).format('YYYY-MM')
       cells.push(
-        <div key={`${year}-${month}`}>
+        <div key={`${year}-${month}`} data-date={`${dateId}`}>
           <div className={`${classPrefix}-title`}>
             {locale.Calendar.yearAndMonth?.replace(
               /\${(.*?)}/g,
@@ -320,7 +339,7 @@ export const CalendarPickerView = forwardRef<
 
   return withNativeProps(
     props,
-    <div className={classPrefix}>
+    <div ref={rootRef} className={classPrefix}>
       {header}
       {mark}
       {body}

src/components/calendar-picker-view/tests/__snapshots__/calendar-picker-view.test.tsx.snap

@@ -56,7 +56,9 @@ exports[`Calendar custom top 1`] = `
     <div
       class="adm-calendar-picker-view-body"
     >
-      <div>
+      <div
+        data-date="2023-05"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -620,7 +622,9 @@ exports[`Calendar jump to a day 1`] = `
     <div
       class="adm-calendar-picker-view-body"
     >
-      <div>
+      <div
+        data-date="2021-01"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -1111,7 +1115,9 @@ exports[`Calendar jump to a day 1`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-date="2021-02"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -1545,7 +1551,9 @@ exports[`Calendar jump to a day 1`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-date="2021-03"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -2024,7 +2032,9 @@ exports[`Calendar jump to a day 1`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-date="2021-04"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -2497,7 +2507,9 @@ exports[`Calendar jump to a day 1`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-date="2021-05"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -2991,7 +3003,9 @@ exports[`Calendar jump to a day 1`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-date="2021-06"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -3458,7 +3472,9 @@ exports[`Calendar jump to a day 1`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-date="2021-07"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -4013,7 +4029,9 @@ exports[`Calendar jump to a day 2`] = `
     <div
       class="adm-calendar-picker-view-body"
     >
-      <div>
+      <div
+        data-date="2023-05"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -4494,7 +4512,9 @@ exports[`Calendar jump to a day 2`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-date="2023-06"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -4967,7 +4987,9 @@ exports[`Calendar jump to a day 2`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-date="2023-07"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -5461,7 +5483,9 @@ exports[`Calendar jump to a day 2`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-date="2023-08"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -5943,7 +5967,9 @@ exports[`Calendar jump to a day 2`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-date="2023-09"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -6419,7 +6445,9 @@ exports[`Calendar jump to a day 2`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-date="2023-10"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -6916,7 +6944,9 @@ exports[`Calendar jump to a day 2`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        data-date="2023-11"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -7447,7 +7477,9 @@ exports[`Calendar range mode 1`] = `
     <div
       class="adm-calendar-picker-view-body"
     >
-      <div>
+      <div
+        data-date="2023-05"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -7993,7 +8025,9 @@ exports[`Calendar single mode 1`] = `
     <div
       class="adm-calendar-picker-view-body"
     >
-      <div>
+      <div
+        data-date="2023-05"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >
@@ -8535,7 +8569,9 @@ exports[`Calendar week start on Monday 1`] = `
     <div
       class="adm-calendar-picker-view-body"
     >
-      <div>
+      <div
+        data-date="2023-05"
+      >
         <div
           class="adm-calendar-picker-view-title"
         >

src/components/calendar-picker-view/tests/calendar-picker-view.test.tsx

@@ -14,6 +14,10 @@ const maxDate: Date = new Date('2023-05-31')
 const singleDate: Date = new Date('2023-05-03')
 const rangeDate: [Date, Date] = [new Date('2023-05-04'), new Date('2023-05-07')]
 
+beforeEach(() => {
+  window.HTMLElement.prototype.scrollIntoView = jest.fn()
+})
+
 describe('Calendar', () => {
   test('a11y', async () => {
     await testA11y(<CalendarPickerView />)

src/components/calendar-picker/calendar-picker.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef } from 'react'
+import React, { forwardRef, useEffect, useRef } from 'react'
 import { withNativeProps } from '../../utils/native-props'
 import classNames from 'classnames'
 import Button from '../button'
@@ -11,6 +11,7 @@
   CalendarPickerViewProps,
   CalendarPickerViewRef,
 } from '../calendar-picker-view'
+import dayjs from 'dayjs'
 
 const classPrefix = 'adm-calendar-picker'
 
@@ -74,6 +75,21 @@
     ...calendarViewProps
   } = props
 
+  useEffect(() => {
+    if (visible) {
+      setTimeout(() => {
+        const dateRange = calendarRef.current?.getDateRange() ?? null
+        if (dateRange && dateRange[0]) {
+          const curr = dayjs(dateRange[0])
+          calendarRef.current?.scrollTo({
+            year: curr.year(),
+            month: curr.month() + 1,
+          })
+        }
+      }, 0)
+    }
+  }, [visible])
+
   const footer = (
     <div className={`${classPrefix}-footer`}>
       <Divider />

src/components/calendar-picker/tests/calendar-picker.test.tsx

@@ -12,6 +12,10 @@ const mixDate: Date = new Date('2023-05-01')
 const maxDate: Date = new Date('2023-05-31')
 const singleDate: Date = new Date('2023-05-03')
 
+beforeEach(() => {
+  window.HTMLElement.prototype.scrollIntoView = jest.fn()
+})
+
 describe('Calendar', () => {
   test('a11y', async () => {
     await testA11y(<CalendarPicker />)