From 3f9329378c14ad1ce16d6a67fd01f65e80fc2aac Mon Sep 17 00:00:00 2001
From: "Lydia HE (HTX)" <lydia_he@htx.gov.sg>
Date: Thu, 22 May 2025 01:10:41 +0800
Subject: [PATCH] Fixed DatePicker month view error: selected month not
 highlighted

---
 packages/ui/src/components/Datepicker/Views/Months.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/Datepicker/Views/Months.tsx b/packages/ui/src/components/Datepicker/Views/Months.tsx
index 30fbe4d679..46b3172bed 100644
--- a/packages/ui/src/components/Datepicker/Views/Months.tsx
+++ b/packages/ui/src/components/Datepicker/Views/Months.tsx
@@ -33,8 +33,9 @@ export function DatepickerViewsMonth() {
     <div className={theme.items.base}>
       {[...Array(12)].map((_month, index) => {
         const newDate = new Date();
-        // setting day to 1 to avoid overflow issues
-        newDate.setMonth(index, 1);
+        // if selectedDate is non-null, align days to accurately detect if month is selected
+        // else if selectedDate is null, set day to 1 to avoid overflow
+        newDate.setMonth(index, selectedDate ? selectedDate.getDate() : 1);
         newDate.setFullYear(viewDate.getFullYear());
         const month = getFormattedDate(language, newDate, { month: "short" });