From 080a25b00cf12e2eed8693b429cd81b7d84a05c2 Mon Sep 17 00:00:00 2001
From: Lansana DIOMANDE <lansana.diomande@cartier.comm>
Date: Tue, 6 Aug 2024 13:52:17 +0200
Subject: [PATCH] refactor(DatePanel): stop displaying an entire line of dates
 for the next month

---
 src/PickerPanel/DatePanel/index.tsx | 10 +++++++++-
 src/utils/dateUtil.ts               | 25 +++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/PickerPanel/DatePanel/index.tsx b/src/PickerPanel/DatePanel/index.tsx
index 4a6f387c3..d7326150b 100644
--- a/src/PickerPanel/DatePanel/index.tsx
+++ b/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}
diff --git a/src/utils/dateUtil.ts b/src/utils/dateUtil.ts
index 7508e067e..5e1ea3585 100644
--- a/src/utils/dateUtil.ts
+++ b/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
+  );
+}