refactor(DatePanel): stop displaying an entire line of dates for the …

…next month

src/PickerPanel/DatePanel/index.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import type { PanelMode, SharedPanelProps } from '../../interface';
 import {
   formatValue,
+  getNumberOfWeeksInMonth,
   getWeekStartDate,
   isSameDate,
   isSameMonth,
@@ -50,6 +51,13 @@ export default function DatePanel<DateType extends object = any>(props: DatePane
   const baseDate = getWeekStartDate(locale.locale, generateConfig, monthStartDate);
   const month = generateConfig.getMonth(pickerValue);
 
+  const numberOfWeeksInMonth = getNumberOfWeeksInMonth(
+    generateConfig,
+    pickerValue,
+    weekFirstDay,
+    locale.locale,
+  );
+
   // =========================== PrefixColumn ===========================
   const showPrefixColumn = showWeek === undefined ? isWeek : showWeek;
   const prefixColumn = showPrefixColumn
@@ -199,7 +207,7 @@ export default function DatePanel<DateType extends object = any>(props: DatePane
           titleFormat={locale.fieldDateFormat}
           {...props}
           colNum={WEEK_DAY_COUNT}
-          rowNum={6}
+          rowNum={numberOfWeeksInMonth}
           baseDate={baseDate}
           // Header
           headerCells={headerCells}

src/utils/dateUtil.ts

@@ -1,5 +1,6 @@
 import type { GenerateConfig } from '../generate';
 import type { CustomFormat, InternalMode, Locale, NullableDateType } from '../interface';
+import { differenceInCalendarWeeks, lastDayOfMonth, startOfMonth } from 'date-fns';
 
 export const WEEK_DAY_COUNT = 7;
 
@@ -270,3 +271,27 @@ export function fillTime<DateType>(
 
   return tmpDate;
 }
+
+type WeekStartsOnType = 0 | 3 | 1 | 4 | 2 | 5 | 6;
+
+export function getNumberOfWeeksInMonth<DateType>(
+  generateConfig: GenerateConfig<DateType>,
+  date: DateType,
+  weekFirstDay: number,
+  locale: string,
+) {
+  const _date = new Date(
+    generateConfig.getYear(date),
+    generateConfig.getMonth(date),
+    generateConfig.getDate(date),
+  );
+
+  return (
+    differenceInCalendarWeeks(lastDayOfMonth(_date), startOfMonth(_date), {
+      weekStartsOn: weekFirstDay as WeekStartsOnType,
+      locale: {
+        code: locale,
+      },
+    }) + 1
+  );
+}