Repository: ant-design/ant-design-mobile
Pull request #6760 (2024-10-14 04:00:26)

fix: 修复 calendar-picker-view 的一些问题
- 修复了默认的 minDay 和 maxDay 会随着 current 变化的问题 https://github.com/ant-design/ant-design-mobile/discussions/6759
- 修复了 view 打开时不会自动滚动到选中值的问题 https://github.com/ant-design/ant-design-mobile/discussions/6759

codecov[bot]: ## [Codecov](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6760?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) Report
Attention: Patch coverage is `87.50000%` with `1 line` in your changes missing coverage. Please review.
> Project coverage is 92.68%. Comparing base [(`b805b5a`)](https://app.codecov.io/gh/ant-design/ant-design-mobile/commit/b805b5ab9aad94391a33d00b7009a316eff7a1fd?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) to head [(`5fa3f07`)](https://app.codecov.io/gh/ant-design/ant-design-mobile/commit/5fa3f073f613316ed49574326cd5f9fa9eab79ce?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).

| [Files with missing lines](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6760?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) | Patch % | Lines |
|---|---|---|
| [...ents/calendar-picker-view/calendar-picker-view.tsx](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6760?src=pr&el=tree&filepath=src%2Fcomponents%2Fcalendar-picker-view%2Fcalendar-picker-view.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvY2FsZW5kYXItcGlja2VyLXZpZXcvY2FsZW5kYXItcGlja2VyLXZpZXcudHN4) | 85.71% | [1 Missing :warning: ](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6760?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) |

<details><summary>Additional details and impacted files</summary>


```diff
@@           Coverage Diff           @@
##           master    #6760   +/-   ##
=======================================
  Coverage   92.68%   92.68%           
=======================================
  Files         334      334           
  Lines        7191     7195    +4     
  Branches     1795     1796    +1     
=======================================
+ Hits         6665     6669    +4     
  Misses        517      517           
  Partials        9        9           
```

</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6760?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).   
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).

zombieJ: `actions/upload-artifact` 也老了。。。

Patch:
diff --git a/src/components/calendar-picker-view/calendar-picker-view.tsx b/src/components/calendar-picker-view/calendar-picker-view.tsx
index 58a300842..f08621e97 100644
--- a/src/components/calendar-picker-view/calendar-picker-view.tsx
+++ b/src/components/calendar-picker-view/calendar-picker-view.tsx
@@ -1,11 +1,12 @@
 import classNames from 'classnames'
 import dayjs from 'dayjs'
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
 import isoWeek from 'dayjs/plugin/isoWeek'
-import type { ReactNode } from 'react'
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
 import React, {
   forwardRef,
+  ReactNode,
   useContext,
+  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -16,10 +17,10 @@ import { usePropsValue } from '../../utils/use-props-value'
 import { mergeProps } from '../../utils/with-default-props'
 import { useConfig } from '../config-provider'
 import {
-  DateRange,
-  Page,
   convertPageToDayjs,
   convertValueToRange,
+  DateRange,
+  Page,
 } from './convert'
 import useSyncScroll from './useSyncScroll'
 
@@ -117,6 +118,14 @@ export const CalendarPickerView = forwardRef<
     dayjs(dateRange ? dateRange[0] : today).date(1)
   )
 
+  const onDateChange = (v: DateRange) => {
+    if (v) {
+      setCurrent(dayjs(v[0]).date(1))
+    }
+
+    setDateRange(v)
+  }
+
   const showHeader = props.title !== false
 
   // =============================== Scroll ===============================
@@ -124,13 +133,30 @@ export const CalendarPickerView = forwardRef<
   const scrollTo = useSyncScroll(current, context.visible, bodyRef)
 
   // ============================== Boundary ==============================
+  // 记录默认的 min 和 max，并在外部的值超出边界时自动扩充
+  const [defaultMin, setDefaultMin] = useState(current)
+  const [defaultMax, setDefaultMax] = useState(() => current.add(6, 'month'))
+
+  useEffect(() => {
+    if (dateRange) {
+      const [startDate, endDate] = dateRange
+      if (!props.min && startDate && dayjs(startDate).isBefore(defaultMin)) {
+        setDefaultMin(dayjs(startDate).date(1))
+      }
+
+      if (!props.max && endDate && dayjs(endDate).isAfter(defaultMax)) {
+        setDefaultMax(dayjs(endDate).endOf('month'))
+      }
+    }
+  }, [dateRange])
+
   const maxDay = useMemo(
-    () => (props.max ? dayjs(props.max) : current.add(6, 'month')),
-    [props.max, current]
+    () => (props.max ? dayjs(props.max) : defaultMax),
+    [props.max, defaultMax]
   )
   const minDay = useMemo(
-    () => (props.min ? dayjs(props.min) : current),
-    [props.min, current]
+    () => (props.min ? dayjs(props.min) : defaultMin),
+    [props.min, defaultMin]
   )
 
   // ================================ Refs ================================
@@ -288,29 +314,29 @@ export const CalendarPickerView = forwardRef<
                       }
                       if (props.selectionMode === 'single') {
                         if (props.allowClear && shouldClear()) {
-                          setDateRange(null)
+                          onDateChange(null)
                           return
                         }
-                        setDateRange([date, date])
+                        onDateChange([date, date])
                       } else if (props.selectionMode === 'range') {
                         if (!dateRange) {
-                          setDateRange([date, date])
+                          onDateChange([date, date])
                           setIntermediate(true)
                           return
                         }
                         if (shouldClear()) {
-                          setDateRange(null)
+                          onDateChange(null)
                           setIntermediate(false)
                           return
                         }
                         if (intermediate) {
                           const another = dateRange[0]
-                          setDateRange(
+                          onDateChange(
                             another > date ? [date, another] : [another, date]
                           )
                           setIntermediate(false)
                         } else {
-                          setDateRange([date, date])
+                          onDateChange([date, date])
                           setIntermediate(true)
                         }
                       }
diff --git a/src/components/calendar-picker-view/demos/demo1.tsx b/src/components/calendar-picker-view/demos/demo1.tsx
index 6d3c30933..8e6e288fe 100644
--- a/src/components/calendar-picker-view/demos/demo1.tsx
+++ b/src/components/calendar-picker-view/demos/demo1.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
 import { CalendarPickerView } from 'antd-mobile'
 import { DemoBlock } from 'demos'
+import React from 'react'
 
 export default () => {
   return (
diff --git a/src/components/calendar-picker/calendar-picker.tsx b/src/components/calendar-picker/calendar-picker.tsx
index 0a8f38c4f..84bbe9a50 100644
--- a/src/components/calendar-picker/calendar-picker.tsx
+++ b/src/components/calendar-picker/calendar-picker.tsx
@@ -55,7 +55,11 @@ export const CalendarPicker = forwardRef<
   CalendarPickerRef,
   CalendarPickerProps
 >((p, ref) => {
-  const props = mergeProps(defaultProps, p)
+  const props = mergeProps<typeof defaultProps, CalendarPickerProps>(
+    defaultProps,
+    p
+  )
+
   const { locale } = useConfig()
   const calendarRef = (ref ??
     useRef<CalendarPickerRef>(null)) as React.RefObject<CalendarPickerRef>
diff --git a/src/components/calendar-picker/demos/demo4.tsx b/src/components/calendar-picker/demos/demo4.tsx
index f25b7b99f..1f4d09952 100644
--- a/src/components/calendar-picker/demos/demo4.tsx
+++ b/src/components/calendar-picker/demos/demo4.tsx
@@ -1,5 +1,8 @@
-import React, { useState, useRef } from 'react'
-import { CalendarPicker, List, CalendarPickerRef } from 'antd-mobile'
+import { CalendarPicker, CalendarPickerRef, List } from 'antd-mobile'
+import React, { useRef, useState } from 'react'
+
+const minDate = new Date(2024, 8, 1)
+const maxDate = new Date(2029, 10, 1)
 
 export default () => {
   const ref1 = useRef<CalendarPickerRef>(null)
@@ -38,6 +41,8 @@ export default () => {
         跳转到 3 年后
         <CalendarPicker
           ref={ref2}
+          min={minDate}
+          max={maxDate}
           visible={visible2}
           onClose={() => setVisible2(false)}
           onMaskClick={() => setVisible2(false)}


Test patch:
diff --git a/src/components/calendar-picker-view/tests/__snapshots__/calendar-picker-view.test.tsx.snap b/src/components/calendar-picker-view/tests/__snapshots__/calendar-picker-view.test.tsx.snap
index 45afafee4..91c7a299d 100644
--- a/src/components/calendar-picker-view/tests/__snapshots__/calendar-picker-view.test.tsx.snap
+++ b/src/components/calendar-picker-view/tests/__snapshots__/calendar-picker-view.test.tsx.snap
@@ -623,2862 +623,12 @@ exports[`Calendar jump to a day 1`] = `
       class="adm-calendar-picker-view-body"
     >
       <div
-        data-year-month="2021-1"
-      >
-        <div
-          class="adm-calendar-picker-view-title"
-        >
-          2021年1月
-        </div>
-        <div
-          class="adm-calendar-picker-view-cells"
-        >
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              1
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              2
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              3
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              4
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              5
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              6
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              7
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              8
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              9
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              10
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              11
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              12
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              13
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              14
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              15
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              16
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              17
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              18
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              19
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              20
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              21
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              22
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              23
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              24
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              25
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              26
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              27
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              28
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              29
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              30
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              31
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        data-year-month="2021-2"
-      >
-        <div
-          class="adm-calendar-picker-view-title"
-        >
-          2021年2月
-        </div>
-        <div
-          class="adm-calendar-picker-view-cells"
-        >
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              1
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              2
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              3
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              4
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              5
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              6
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              7
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              8
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              9
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              10
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              11
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              12
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              13
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              14
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              15
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              16
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              17
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              18
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              19
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              20
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              21
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              22
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              23
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              24
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              25
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              26
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              27
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              28
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        data-year-month="2021-3"
-      >
-        <div
-          class="adm-calendar-picker-view-title"
-        >
-          2021年3月
-        </div>
-        <div
-          class="adm-calendar-picker-view-cells"
-        >
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              1
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              2
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              3
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              4
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              5
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              6
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              7
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              8
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              9
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              10
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              11
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              12
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              13
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              14
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              15
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              16
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              17
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              18
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              19
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              20
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              21
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              22
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              23
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              24
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              25
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              26
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              27
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              28
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              29
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              30
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              31
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        data-year-month="2021-4"
-      >
-        <div
-          class="adm-calendar-picker-view-title"
-        >
-          2021年4月
-        </div>
-        <div
-          class="adm-calendar-picker-view-cells"
-        >
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              1
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              2
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              3
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              4
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              5
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              6
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              7
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              8
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              9
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              10
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              11
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              12
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              13
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              14
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              15
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              16
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              17
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              18
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              19
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              20
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              21
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              22
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              23
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              24
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              25
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              26
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              27
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              28
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              29
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              30
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        data-year-month="2021-5"
-      >
-        <div
-          class="adm-calendar-picker-view-title"
-        >
-          2021年5月
-        </div>
-        <div
-          class="adm-calendar-picker-view-cells"
-        >
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              1
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              2
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              3
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              4
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              5
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              6
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              7
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              8
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              9
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              10
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              11
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              12
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              13
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              14
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              15
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              16
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              17
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              18
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              19
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              20
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              21
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              22
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              23
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              24
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              25
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              26
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              27
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              28
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              29
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              30
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              31
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        data-year-month="2021-6"
-      >
-        <div
-          class="adm-calendar-picker-view-title"
-        >
-          2021年6月
-        </div>
-        <div
-          class="adm-calendar-picker-view-cells"
-        >
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              1
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              2
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              3
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              4
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              5
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              6
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              7
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              8
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              9
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              10
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              11
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              12
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              13
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              14
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              15
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              16
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              17
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              18
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              19
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              20
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              21
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              22
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              23
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              24
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              25
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              26
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              27
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              28
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              29
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              30
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        data-year-month="2021-7"
+        data-year-month="2020-12"
       >
         <div
           class="adm-calendar-picker-view-title"
         >
-          2021年7月
+          2020年12月
         </div>
         <div
           class="adm-calendar-picker-view-cells"
@@ -3489,12 +639,6 @@ exports[`Calendar jump to a day 1`] = `
           <div
             class="adm-calendar-picker-view-cell"
           />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
           <div
             class="adm-calendar-picker-view-cell"
           >
@@ -3511,7 +655,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3526,7 +670,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3541,7 +685,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3556,7 +700,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3571,7 +715,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3586,7 +730,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3601,7 +745,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3616,7 +760,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3631,7 +775,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3646,7 +790,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3661,7 +805,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3676,7 +820,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3691,7 +835,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3706,7 +850,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3721,7 +865,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3736,7 +880,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3751,7 +895,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3766,7 +910,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3781,7 +925,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3796,7 +940,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3811,7 +955,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3826,7 +970,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3841,7 +985,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3856,7 +1000,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3871,7 +1015,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3886,7 +1030,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3901,7 +1045,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3916,7 +1060,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3931,7 +1075,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3946,7 +1090,7 @@ exports[`Calendar jump to a day 1`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -3962,84 +1106,29 @@ exports[`Calendar jump to a day 1`] = `
           </div>
         </div>
       </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Calendar jump to a day 2`] = `
-<div>
-  <button>
-    jumpTo
-  </button>
-  <button>
-    jumpToToday
-  </button>
-  <div
-    class="adm-calendar-picker-view"
-  >
-    <div
-      class="adm-calendar-picker-view-header"
-    >
-      <div
-        class="adm-calendar-picker-view-title"
-      >
-        日期选择
-      </div>
-    </div>
-    <div
-      class="adm-calendar-picker-view-mark"
-    >
-      <div
-        class="adm-calendar-picker-view-mark-cell"
-      >
-        日
-      </div>
-      <div
-        class="adm-calendar-picker-view-mark-cell"
-      >
-        一
-      </div>
-      <div
-        class="adm-calendar-picker-view-mark-cell"
-      >
-        二
-      </div>
-      <div
-        class="adm-calendar-picker-view-mark-cell"
-      >
-        三
-      </div>
-      <div
-        class="adm-calendar-picker-view-mark-cell"
-      >
-        四
-      </div>
-      <div
-        class="adm-calendar-picker-view-mark-cell"
-      >
-        五
-      </div>
-      <div
-        class="adm-calendar-picker-view-mark-cell"
-      >
-        六
-      </div>
-    </div>
-    <div
-      class="adm-calendar-picker-view-body"
-    >
       <div
-        data-year-month="2023-5"
+        data-year-month="2021-1"
       >
         <div
           class="adm-calendar-picker-view-title"
         >
-          2023年5月
+          2021年1月
         </div>
         <div
           class="adm-calendar-picker-view-cells"
         >
+          <div
+            class="adm-calendar-picker-view-cell"
+          />
+          <div
+            class="adm-calendar-picker-view-cell"
+          />
+          <div
+            class="adm-calendar-picker-view-cell"
+          />
+          <div
+            class="adm-calendar-picker-view-cell"
+          />
           <div
             class="adm-calendar-picker-view-cell"
           />
@@ -4359,13 +1448,11 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-today"
+            class="adm-calendar-picker-view-cell"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
-            >
-              今日
-            </div>
+            />
             <div
               class="adm-calendar-picker-view-cell-date"
             >
@@ -4513,25 +1600,16 @@ exports[`Calendar jump to a day 2`] = `
         </div>
       </div>
       <div
-        data-year-month="2023-6"
+        data-year-month="2021-2"
       >
         <div
           class="adm-calendar-picker-view-title"
         >
-          2023年6月
+          2021年2月
         </div>
         <div
           class="adm-calendar-picker-view-cells"
         >
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
           <div
             class="adm-calendar-picker-view-cell"
           />
@@ -4799,37 +1877,7 @@ exports[`Calendar jump to a day 2`] = `
             <div
               class="adm-calendar-picker-view-cell-date"
             >
-              18
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              19
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              20
+              18
             </div>
             <div
               class="adm-calendar-picker-view-cell-bottom"
@@ -4844,7 +1892,7 @@ exports[`Calendar jump to a day 2`] = `
             <div
               class="adm-calendar-picker-view-cell-date"
             >
-              21
+              19
             </div>
             <div
               class="adm-calendar-picker-view-cell-bottom"
@@ -4859,7 +1907,7 @@ exports[`Calendar jump to a day 2`] = `
             <div
               class="adm-calendar-picker-view-cell-date"
             >
-              22
+              20
             </div>
             <div
               class="adm-calendar-picker-view-cell-bottom"
@@ -4874,7 +1922,7 @@ exports[`Calendar jump to a day 2`] = `
             <div
               class="adm-calendar-picker-view-cell-date"
             >
-              23
+              21
             </div>
             <div
               class="adm-calendar-picker-view-cell-bottom"
@@ -4889,7 +1937,7 @@ exports[`Calendar jump to a day 2`] = `
             <div
               class="adm-calendar-picker-view-cell-date"
             >
-              24
+              22
             </div>
             <div
               class="adm-calendar-picker-view-cell-bottom"
@@ -4904,7 +1952,7 @@ exports[`Calendar jump to a day 2`] = `
             <div
               class="adm-calendar-picker-view-cell-date"
             >
-              25
+              23
             </div>
             <div
               class="adm-calendar-picker-view-cell-bottom"
@@ -4919,7 +1967,7 @@ exports[`Calendar jump to a day 2`] = `
             <div
               class="adm-calendar-picker-view-cell-date"
             >
-              26
+              24
             </div>
             <div
               class="adm-calendar-picker-view-cell-bottom"
@@ -4934,7 +1982,7 @@ exports[`Calendar jump to a day 2`] = `
             <div
               class="adm-calendar-picker-view-cell-date"
             >
-              27
+              25
             </div>
             <div
               class="adm-calendar-picker-view-cell-bottom"
@@ -4949,7 +1997,7 @@ exports[`Calendar jump to a day 2`] = `
             <div
               class="adm-calendar-picker-view-cell-date"
             >
-              28
+              26
             </div>
             <div
               class="adm-calendar-picker-view-cell-bottom"
@@ -4964,7 +2012,7 @@ exports[`Calendar jump to a day 2`] = `
             <div
               class="adm-calendar-picker-view-cell-date"
             >
-              29
+              27
             </div>
             <div
               class="adm-calendar-picker-view-cell-bottom"
@@ -4979,7 +2027,7 @@ exports[`Calendar jump to a day 2`] = `
             <div
               class="adm-calendar-picker-view-cell-date"
             >
-              30
+              28
             </div>
             <div
               class="adm-calendar-picker-view-cell-bottom"
@@ -4988,31 +2036,16 @@ exports[`Calendar jump to a day 2`] = `
         </div>
       </div>
       <div
-        data-year-month="2023-7"
+        data-year-month="2021-3"
       >
         <div
           class="adm-calendar-picker-view-title"
         >
-          2023年7月
+          2021年3月
         </div>
         <div
           class="adm-calendar-picker-view-cells"
         >
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
           <div
             class="adm-calendar-picker-view-cell"
           />
@@ -5032,7 +2065,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5047,7 +2080,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5062,7 +2095,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5077,7 +2110,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5092,7 +2125,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5107,7 +2140,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5122,7 +2155,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5137,7 +2170,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5152,7 +2185,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5167,7 +2200,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5182,7 +2215,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5197,7 +2230,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5212,7 +2245,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5227,7 +2260,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5242,7 +2275,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5257,7 +2290,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5272,7 +2305,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5287,7 +2320,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5302,7 +2335,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5317,7 +2350,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5332,7 +2365,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5347,7 +2380,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5362,7 +2395,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5377,7 +2410,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5392,7 +2425,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5407,7 +2440,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5422,7 +2455,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5437,7 +2470,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5452,7 +2485,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5467,7 +2500,7 @@ exports[`Calendar jump to a day 2`] = `
             />
           </div>
           <div
-            class="adm-calendar-picker-view-cell"
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
           >
             <div
               class="adm-calendar-picker-view-cell-top"
@@ -5483,13 +2516,80 @@ exports[`Calendar jump to a day 2`] = `
           </div>
         </div>
       </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Calendar jump to a day 2`] = `
+<div>
+  <button>
+    jumpTo
+  </button>
+  <button>
+    jumpToToday
+  </button>
+  <div
+    class="adm-calendar-picker-view"
+  >
+    <div
+      class="adm-calendar-picker-view-header"
+    >
+      <div
+        class="adm-calendar-picker-view-title"
+      >
+        日期选择
+      </div>
+    </div>
+    <div
+      class="adm-calendar-picker-view-mark"
+    >
+      <div
+        class="adm-calendar-picker-view-mark-cell"
+      >
+        日
+      </div>
+      <div
+        class="adm-calendar-picker-view-mark-cell"
+      >
+        一
+      </div>
+      <div
+        class="adm-calendar-picker-view-mark-cell"
+      >
+        二
+      </div>
+      <div
+        class="adm-calendar-picker-view-mark-cell"
+      >
+        三
+      </div>
+      <div
+        class="adm-calendar-picker-view-mark-cell"
+      >
+        四
+      </div>
+      <div
+        class="adm-calendar-picker-view-mark-cell"
+      >
+        五
+      </div>
+      <div
+        class="adm-calendar-picker-view-mark-cell"
+      >
+        六
+      </div>
+    </div>
+    <div
+      class="adm-calendar-picker-view-body"
+    >
       <div
-        data-year-month="2023-8"
+        data-year-month="2020-12"
       >
         <div
           class="adm-calendar-picker-view-title"
         >
-          2023年8月
+          2020年12月
         </div>
         <div
           class="adm-calendar-picker-view-cells"
@@ -5968,12 +3068,12 @@ exports[`Calendar jump to a day 2`] = `
         </div>
       </div>
       <div
-        data-year-month="2023-9"
+        data-year-month="2021-1"
       >
         <div
           class="adm-calendar-picker-view-title"
         >
-          2023年9月
+          2021年1月
         </div>
         <div
           class="adm-calendar-picker-view-cells"
@@ -6443,19 +3543,37 @@ exports[`Calendar jump to a day 2`] = `
               class="adm-calendar-picker-view-cell-bottom"
             />
           </div>
+          <div
+            class="adm-calendar-picker-view-cell"
+          >
+            <div
+              class="adm-calendar-picker-view-cell-top"
+            />
+            <div
+              class="adm-calendar-picker-view-cell-date"
+            >
+              31
+            </div>
+            <div
+              class="adm-calendar-picker-view-cell-bottom"
+            />
+          </div>
         </div>
       </div>
       <div
-        data-year-month="2023-10"
+        data-year-month="2021-2"
       >
         <div
           class="adm-calendar-picker-view-title"
         >
-          2023年10月
+          2021年2月
         </div>
         <div
           class="adm-calendar-picker-view-cells"
         >
+          <div
+            class="adm-calendar-picker-view-cell"
+          />
           <div
             class="adm-calendar-picker-view-cell"
           >
@@ -6876,70 +3994,19 @@ exports[`Calendar jump to a day 2`] = `
               class="adm-calendar-picker-view-cell-bottom"
             />
           </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              29
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              30
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
-          <div
-            class="adm-calendar-picker-view-cell"
-          >
-            <div
-              class="adm-calendar-picker-view-cell-top"
-            />
-            <div
-              class="adm-calendar-picker-view-cell-date"
-            >
-              31
-            </div>
-            <div
-              class="adm-calendar-picker-view-cell-bottom"
-            />
-          </div>
         </div>
       </div>
       <div
-        data-year-month="2023-11"
+        data-year-month="2021-3"
       >
         <div
           class="adm-calendar-picker-view-title"
         >
-          2023年11月
+          2021年3月
         </div>
         <div
           class="adm-calendar-picker-view-cells"
         >
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
-          <div
-            class="adm-calendar-picker-view-cell"
-          />
           <div
             class="adm-calendar-picker-view-cell"
           />
@@ -7393,6 +4460,21 @@ exports[`Calendar jump to a day 2`] = `
               class="adm-calendar-picker-view-cell-bottom"
             />
           </div>
+          <div
+            class="adm-calendar-picker-view-cell adm-calendar-picker-view-cell-disabled"
+          >
+            <div
+              class="adm-calendar-picker-view-cell-top"
+            />
+            <div
+              class="adm-calendar-picker-view-cell-date"
+            >
+              31
+            </div>
+            <div
+              class="adm-calendar-picker-view-cell-bottom"
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/calendar-picker-view/tests/calendar-picker-view.test.tsx b/src/components/calendar-picker-view/tests/calendar-picker-view.test.tsx
index 4d3f82556..cf4ae4b88 100644
--- a/src/components/calendar-picker-view/tests/calendar-picker-view.test.tsx
+++ b/src/components/calendar-picker-view/tests/calendar-picker-view.test.tsx
@@ -82,7 +82,12 @@ describe('Calendar', () => {
           >
             jumpToToday
           </button>
-          <CalendarPickerView selectionMode='single' ref={ref} />
+          <CalendarPickerView
+            selectionMode='single'
+            min={new Date(2020, 11)}
+            max={new Date(2021, 2)}
+            ref={ref}
+          />
         </>
       )
     }
@@ -177,4 +182,30 @@ describe('Calendar', () => {
 
     expect(container.querySelectorAll(`.${classPrefix}-cell`)).toHaveLength(30)
   })
+
+  test('auto expand month list', () => {
+    const { container, rerender } = render(
+      <CalendarPickerView value={new Date(2024, 9, 1)} selectionMode='single' />
+    )
+
+    const body = container.querySelector(`.${classPrefix}-body`)
+    // 默认渲染 2024-10 到 2025-4 七个月
+    expect(body?.childNodes.length).toBe(7)
+
+    rerender(
+      <CalendarPickerView value={new Date(2024, 8, 1)} selectionMode='single' />
+    )
+
+    expect(
+      container.querySelector('[data-year-month="2024-9"]')
+    ).toBeInTheDocument()
+
+    rerender(
+      <CalendarPickerView value={new Date(2025, 7, 1)} selectionMode='single' />
+    )
+
+    expect(
+      container.querySelector('[data-year-month="2025-8"]')
+    ).toBeInTheDocument()
+  })
 })
diff --git a/src/components/calendar-picker/tests/calendar-picker.test.tsx b/src/components/calendar-picker/tests/calendar-picker.test.tsx
index b83fe4c78..fd3c0258c 100644
--- a/src/components/calendar-picker/tests/calendar-picker.test.tsx
+++ b/src/components/calendar-picker/tests/calendar-picker.test.tsx
@@ -10,7 +10,7 @@ const classPrefix = `adm-calendar-picker-view`
 MockDate.set(new Date('2023-05-22'))
 
 const mixDate: Date = new Date('2023-05-01')
-const maxDate: Date = new Date('2023-05-31')
+const maxDate: Date = new Date('2023-06-31')
 const singleDate: Date = new Date('2023-05-03')
 
 describe('Calendar', () => {
@@ -40,11 +40,39 @@ describe('Calendar', () => {
       />
     )
 
+    const spyScrollIntoView = jest.fn()
+    const spyHTMLElement = spyElementPrototype(
+      HTMLElement,
+      'scrollIntoView',
+      spyScrollIntoView
+    )
+
+    act(() => {
+      jest.runAllTimers()
+    })
+
+    expect(spyScrollIntoView.mock.instances[0]).toHaveAttribute(
+      'data-year-month',
+      '2023-5'
+    )
+
     expect(container).toMatchSnapshot()
-    const dateEl = getAllByText(15)[0]
+    const dateEl = getAllByText(15)[1]
     fireEvent.click(dateEl)
     expect(dateEl.parentElement).toHaveClass(`${classPrefix}-cell-selected`)
     expect(fn).toBeCalled()
+
+    act(() => {
+      jest.runAllTimers()
+    })
+
+    /* 选择后 current 更新，滚动到 2023-6 */
+    expect(spyScrollIntoView.mock.instances[1]).toHaveAttribute(
+      'data-year-month',
+      '2023-6'
+    )
+
+    spyHTMLElement.mockRestore()
   })
 
   test('jumpTo should trigger scroll', () => {
diff --git a/src/tests/testing.tsx b/src/tests/testing.tsx
index b790d5d6e..559890260 100644
--- a/src/tests/testing.tsx
+++ b/src/tests/testing.tsx
@@ -6,7 +6,7 @@ import {
   RenderOptions,
   RenderResult,
 } from '@testing-library/react'
-import { toHaveNoViolations, axe } from 'jest-axe'
+import { axe, toHaveNoViolations } from 'jest-axe'
 import * as React from 'react'
 
 expect.extend(toHaveNoViolations)
@@ -68,13 +68,17 @@ export interface TestOptions extends Omit<RenderOptions, 'wrapper'> {
 export const customRender = (
   ui: UI,
   { wrapper: Wrapper = AllTheProviders, ...options }: TestOptions = {}
-): RenderResult => render(<Wrapper>{ui}</Wrapper>, options)
+): RenderResult => {
+  const renderResult = render(<Wrapper>{ui}</Wrapper>, options)
+  return {
+    ...renderResult,
+    rerender: ui => renderResult.rerender(<Wrapper>{ui}</Wrapper>),
+  }
+}
 
 // re-export everything
 export * from '@testing-library/react'
-
 export { default as userEvent } from '@testing-library/user-event'
-
 // override render method
 export { customRender as render }