From d536caf8515fcc808c529af2c926e2927ab54d93 Mon Sep 17 00:00:00 2001
From: Khareem Nurulla <khareem.nurulla@bld.ai>
Date: Mon, 5 Aug 2024 14:03:15 +0800
Subject: [PATCH] fix(datepicker) duplicate month display #1456 (#1457)

---
 .../components/Datepicker/Views/Months.tsx    | 20 ++++++-------------
 .../ui/src/components/Datepicker/helpers.ts   |  4 ++++
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/packages/ui/src/components/Datepicker/Views/Months.tsx b/packages/ui/src/components/Datepicker/Views/Months.tsx
index 69b4d897c..dcd98108f 100644
--- a/packages/ui/src/components/Datepicker/Views/Months.tsx
+++ b/packages/ui/src/components/Datepicker/Views/Months.tsx
@@ -2,7 +2,7 @@ import type { FC } from "react";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../../helpers/merge-deep";
 import { useDatePickerContext } from "../DatepickerContext";
-import { getFormattedDate, isDateEqual, isDateInRange, Views } from "../helpers";
+import { getFormattedDate, isDateInRange, isMonthEqual, Views } from "../helpers";
 
 export interface FlowbiteDatepickerViewsMonthsTheme {
   items: {
@@ -20,27 +20,19 @@ export interface DatepickerViewsMonthsProps {
 }
 
 export const DatepickerViewsMonth: FC<DatepickerViewsMonthsProps> = ({ theme: customTheme = {} }) => {
-  const {
-    theme: rootTheme,
-    minDate,
-    maxDate,
-    selectedDate,
-    viewDate,
-    language,
-    setViewDate,
-    setView,
-  } = useDatePickerContext();
+  const { theme: rootTheme, minDate, maxDate, selectedDate, language, setViewDate, setView } = useDatePickerContext();
 
   const theme = mergeDeep(rootTheme.views.months, customTheme);
 
   return (
     <div className={theme.items.base}>
       {[...Array(12)].map((_month, index) => {
-        const newDate = new Date(viewDate.getTime());
-        newDate.setMonth(index);
+        const newDate = new Date();
+        // setting day to 1 to avoid overflow issues
+        newDate.setMonth(index, 1);
         const month = getFormattedDate(language, newDate, { month: "short" });
 
-        const isSelected = isDateEqual(selectedDate, newDate);
+        const isSelected = isMonthEqual(selectedDate, newDate);
         const isDisabled = !isDateInRange(newDate, minDate, maxDate);
 
         return (
diff --git a/packages/ui/src/components/Datepicker/helpers.ts b/packages/ui/src/components/Datepicker/helpers.ts
index d89131762..6585f3bba 100644
--- a/packages/ui/src/components/Datepicker/helpers.ts
+++ b/packages/ui/src/components/Datepicker/helpers.ts
@@ -44,6 +44,10 @@ export const isDateEqual = (date: Date, selectedDate: Date): boolean => {
   return date.getTime() === selectedDate.getTime();
 };
 
+export const isMonthEqual = (date: Date, selectedDate: Date): boolean => {
+  return date.getMonth() === selectedDate.getMonth();
+};
+
 export const getFirstDateInRange = (date: Date, minDate?: Date, maxDate?: Date): Date => {
   if (!isDateInRange(date, minDate, maxDate)) {
     if (minDate && date < minDate) {