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) => ( +
+ )) + cells.push(
@@ -191,15 +205,7 @@ export const CalendarPickerView = forwardRef<
{/* 空格填充 */} - {Array( - props.weekStartsOn === 'Monday' - ? monthIterator.date(1).isoWeekday() - 1 - : monthIterator.date(1).isoWeekday() - ) - .fill(null) - .map((_, index) => ( -
- ))} + {presetEmptyCells} {/* 遍历每月 */} {Array(monthIterator.daysInMonth()) .fill(null) 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`] = `
-
-
-
-
-
-
-
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( + + ) + + expect( + container.querySelectorAll('.adm-calendar-picker-view-cell') + ).toHaveLength(30) + }) }) 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 ( @@ -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')} /> -
-
-
-
-
-
-
@@ -6411,27 +6390,6 @@ exports[`ConfigProvider should display the text as da-DK 1`] = `
-
-
-
-
-
-
-
@@ -11069,27 +11027,6 @@ exports[`ConfigProvider should display the text as de-DE 1`] = `
-
-
-
-
-
-
-
@@ -15727,27 +15664,6 @@ exports[`ConfigProvider should display the text as en 1`] = `
-
-
-
-
-
-
-
@@ -20385,27 +20301,6 @@ exports[`ConfigProvider should display the text as es 1`] = `
-
-
-
-
-
-
-
@@ -25043,27 +24938,6 @@ exports[`ConfigProvider should display the text as fa-IR 1`] = `
-
-
-
-
-
-
-
@@ -29701,27 +29575,6 @@ exports[`ConfigProvider should display the text as fr-FR 1`] = `
-
-
-
-
-
-
-
@@ -34359,27 +34212,6 @@ exports[`ConfigProvider should display the text as hu 1`] = `
-
-
-
-
-
-
-
@@ -39017,27 +38849,6 @@ exports[`ConfigProvider should display the text as id-ID 1`] = `
-
-
-
-
-
-
-
@@ -43675,27 +43486,6 @@ exports[`ConfigProvider should display the text as in-ID 1`] = `
-
-
-
-
-
-
-
@@ -48333,27 +48123,6 @@ exports[`ConfigProvider should display the text as it-IT 1`] = `
-
-
-
-
-
-
-
@@ -52991,27 +52760,6 @@ exports[`ConfigProvider should display the text as ja-JP 1`] = `
-
-
-
-
-
-
-
@@ -57649,27 +57397,6 @@ exports[`ConfigProvider should display the text as kk-KZ 1`] = `
-
-
-
-
-
-
-
@@ -62307,27 +62034,6 @@ exports[`ConfigProvider should display the text as ko-KR 1`] = `
-
-
-
-
-
-
-
@@ -66965,27 +66671,6 @@ exports[`ConfigProvider should display the text as ms-MY 1`] = `
-
-
-
-
-
-
-
@@ -71623,27 +71308,6 @@ exports[`ConfigProvider should display the text as nb-NO 1`] = `
-
-
-
-
-
-
-
@@ -76281,27 +75945,6 @@ exports[`ConfigProvider should display the text as nl-NL 1`] = `
-
-
-
-
-
-
-
@@ -80939,27 +80582,6 @@ exports[`ConfigProvider should display the text as pt-BR 1`] = `
-
-
-
-
-
-
-
@@ -85597,27 +85219,6 @@ exports[`ConfigProvider should display the text as ru 1`] = `
-
-
-
-
-
-
-
@@ -90255,27 +89856,6 @@ exports[`ConfigProvider should display the text as th-TH 1`] = `
-
-
-
-
-
-
-
@@ -94913,27 +94493,6 @@ exports[`ConfigProvider should display the text as tr-TR 1`] = `
-
-
-
-
-
-
-
@@ -99571,27 +99130,6 @@ exports[`ConfigProvider should display the text as vi-VN 1`] = `
-
-
-
-
-
-
-
@@ -104229,27 +103767,6 @@ exports[`ConfigProvider should display the text as zh-CH 1`] = `
-
-
-
-
-
-
-
@@ -108887,27 +108404,6 @@ exports[`ConfigProvider should display the text as zh-HK 1`] = `
-
-
-
-
-
-
-
@@ -113545,27 +113041,6 @@ exports[`ConfigProvider should display the text as zh-TW 1`] = `
-
-
-
-
-
-
-