Repository: ant-design/ant-design-mobile (TypeScript)

Issue:
CalendarPicker bug 1号是周日时，当月最上面会多一个空行
### Version of antd-mobile

V5.35.0

### Operating system and its version

Others

### Browser and its version

_No response_

### Sandbox to reproduce

_No response_

### What happened?

官网事例就有这个bug，每月的1号是周日时，这个月的上面会多一个空行
![image](https://github.com/ant-design/ant-design-mobile/assets/174436172/449a15d7-f97e-421c-b1b2-050bf1c43523)


### Relevant log output

_No response_


Discussion:

Patch:
diff --git a/src/components/calendar-picker-view/calendar-picker-view.tsx b/src/components/calendar-picker-view/calendar-picker-view.tsx
index 660c1b98eb..83a38591e1 100644
--- a/src/components/calendar-picker-view/calendar-picker-view.tsx
+++ b/src/components/calendar-picker-view/calendar-picker-view.tsx
@@ -179,6 +179,20 @@ export const CalendarPickerView = forwardRef<
 
       const yearMonth = `${year}-${month}`
 
+      // 获取需要预先填充的空格，如果是 7 天则不需要填充
+      const presetEmptyCellCount =
+        props.weekStartsOn === 'Monday'
+          ? monthIterator.date(1).isoWeekday() - 1
+          : monthIterator.date(1).isoWeekday()
+      const presetEmptyCells =
+        presetEmptyCellCount == 7
+          ? null
+          : Array(presetEmptyCellCount)
+              .fill(null)
+              .map((_, index) => (
+                <div key={index} className={`${classPrefix}-cell`}></div>
+              ))
+
       cells.push(
         <div key={yearMonth} data-year-month={yearMonth}>
           <div className={`${classPrefix}-title`}>
@@ -191,15 +205,7 @@ export const CalendarPickerView = forwardRef<
           </div>
           <div className={`${classPrefix}-cells`}>
             {/* 空格填充 */}
-            {Array(
-              props.weekStartsOn === 'Monday'
-                ? monthIterator.date(1).isoWeekday() - 1
-                : monthIterator.date(1).isoWeekday()
-            )
-              .fill(null)
-              .map((_, index) => (
-                <div key={index} className={`${classPrefix}-cell`}></div>
-              ))}
+            {presetEmptyCells}
             {/* 遍历每月 */}
             {Array(monthIterator.daysInMonth())
               .fill(null)
diff --git a/src/components/calendar-picker/demos/demo1.tsx b/src/components/calendar-picker/demos/demo1.tsx
index 82284fdaaa..c11184b48f 100644
--- a/src/components/calendar-picker/demos/demo1.tsx
+++ b/src/components/calendar-picker/demos/demo1.tsx
@@ -1,6 +1,6 @@
+import { CalendarPicker, List } from 'antd-mobile'
 import dayjs from 'dayjs'
 import React, { useState } from 'react'
-import { CalendarPicker, List } from 'antd-mobile'
 
 const defaultRange: [Date, Date] = [
   dayjs().toDate(),
@@ -16,7 +16,8 @@ export default () => {
   const [visible2, setVisible2] = useState(false)
   const [visible3, setVisible3] = useState(false)
 
-  const singleDate: Date = new Date('2023-06-03')
+  // const singleDate: Date = new Date('2023-06-03')
+  const singleDate: Date = new Date('2024-09-01')
 
   return (
     <List header='日期选择'>
@@ -32,6 +33,8 @@ export default () => {
           defaultValue={singleDate}
           onClose={() => setVisible1(false)}
           onMaskClick={() => setVisible1(false)}
+          min={new Date('2024-09-01')}
+          max={new Date('2024-09-30')}
         />
       </List.Item>
       <List.Item


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 cf673eba6e..45afafee4c 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
@@ -6456,27 +6456,6 @@ exports[`Calendar jump to a day 2`] = `
         <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"
           >
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 43eecb0f87..37d826643b 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
@@ -1,8 +1,8 @@
-import React, { useRef } from 'react'
-import { render, testA11y, fireEvent } from 'testing'
-import CalendarPickerView, { CalendarPickerViewRef } from '..'
 import dayjs from 'dayjs'
 import MockDate from 'mockdate'
+import React, { useRef } from 'react'
+import { fireEvent, render, testA11y } from 'testing'
+import CalendarPickerView, { CalendarPickerViewRef } from '..'
 
 const classPrefix = `adm-calendar-picker-view`
 
@@ -160,4 +160,17 @@ describe('Calendar', () => {
     )
     expect(document.getElementsByClassName('custom-cell').length).toBe(31)
   })
+
+  test('not fill empty cells if unnecessary', () => {
+    const { container } = render(
+      <CalendarPickerView
+        min={new Date('2024-09-01')}
+        max={new Date('2024-09-30')}
+      />
+    )
+
+    expect(
+      container.querySelectorAll('.adm-calendar-picker-view-cell')
+    ).toHaveLength(30)
+  })
 })
diff --git a/src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap b/src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap
index 8e50f00c16..9fa333fe70 100644
--- a/src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap
+++ b/src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap
@@ -1753,27 +1753,6 @@ exports[`ConfigProvider should display the text as ar-SA 1`] = `
         <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"
           >
@@ -6411,27 +6390,6 @@ exports[`ConfigProvider should display the text as da-DK 1`] = `
         <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"
           >
@@ -11069,27 +11027,6 @@ exports[`ConfigProvider should display the text as de-DE 1`] = `
         <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"
           >
@@ -15727,27 +15664,6 @@ exports[`ConfigProvider should display the text as en 1`] = `
         <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"
           >
@@ -20385,27 +20301,6 @@ exports[`ConfigProvider should display the text as es 1`] = `
         <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"
           >
@@ -25043,27 +24938,6 @@ exports[`ConfigProvider should display the text as fa-IR 1`] = `
         <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"
           >
@@ -29701,27 +29575,6 @@ exports[`ConfigProvider should display the text as fr-FR 1`] = `
         <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"
           >
@@ -34359,27 +34212,6 @@ exports[`ConfigProvider should display the text as hu 1`] = `
         <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"
           >
@@ -39017,27 +38849,6 @@ exports[`ConfigProvider should display the text as id-ID 1`] = `
         <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"
           >
@@ -43675,27 +43486,6 @@ exports[`ConfigProvider should display the text as in-ID 1`] = `
         <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"
           >
@@ -48333,27 +48123,6 @@ exports[`ConfigProvider should display the text as it-IT 1`] = `
         <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"
           >
@@ -52991,27 +52760,6 @@ exports[`ConfigProvider should display the text as ja-JP 1`] = `
         <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"
           >
@@ -57649,27 +57397,6 @@ exports[`ConfigProvider should display the text as kk-KZ 1`] = `
         <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"
           >
@@ -62307,27 +62034,6 @@ exports[`ConfigProvider should display the text as ko-KR 1`] = `
         <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"
           >
@@ -66965,27 +66671,6 @@ exports[`ConfigProvider should display the text as ms-MY 1`] = `
         <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"
           >
@@ -71623,27 +71308,6 @@ exports[`ConfigProvider should display the text as nb-NO 1`] = `
         <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"
           >
@@ -76281,27 +75945,6 @@ exports[`ConfigProvider should display the text as nl-NL 1`] = `
         <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"
           >
@@ -80939,27 +80582,6 @@ exports[`ConfigProvider should display the text as pt-BR 1`] = `
         <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"
           >
@@ -85597,27 +85219,6 @@ exports[`ConfigProvider should display the text as ru 1`] = `
         <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"
           >
@@ -90255,27 +89856,6 @@ exports[`ConfigProvider should display the text as th-TH 1`] = `
         <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"
           >
@@ -94913,27 +94493,6 @@ exports[`ConfigProvider should display the text as tr-TR 1`] = `
         <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"
           >
@@ -99571,27 +99130,6 @@ exports[`ConfigProvider should display the text as vi-VN 1`] = `
         <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"
           >
@@ -104229,27 +103767,6 @@ exports[`ConfigProvider should display the text as zh-CH 1`] = `
         <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"
           >
@@ -108887,27 +108404,6 @@ exports[`ConfigProvider should display the text as zh-HK 1`] = `
         <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"
           >
@@ -113545,27 +113041,6 @@ exports[`ConfigProvider should display the text as zh-TW 1`] = `
         <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"
           >