fix(datepicker) duplicate month display #1456 (#1457)

themesberg · Aug 5, 2024 · d536caf · d536caf
1 parent 1a5dadd
commit d536caf
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 14 deletions.
diff --git 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
@@ -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) {