diff --git a/.changeset/tidy-squids-knock.md b/.changeset/tidy-squids-knock.md
new file mode 100644
index 0000000000..1b01645425
--- /dev/null
+++ b/.changeset/tidy-squids-knock.md
@@ -0,0 +1,6 @@
+---
+"@nextui-org/calendar": patch
+"@nextui-org/date-picker": patch
+---
+
+fix hours, month clear issue in `showMonthAndYearPickers` mode (#3072).
diff --git a/packages/components/calendar/src/use-calendar-picker.ts b/packages/components/calendar/src/use-calendar-picker.ts
index ff9dce3109..fca2c7bae1 100644
--- a/packages/components/calendar/src/use-calendar-picker.ts
+++ b/packages/components/calendar/src/use-calendar-picker.ts
@@ -115,6 +115,8 @@ export function useCalendarPicker(props: CalendarPickerProps) {
 
   // scroll to the selected month/year when the component is mounted/opened/closed
   useEffect(() => {
+    if (!isHeaderExpanded) return;
+
     scrollTo(date.month, "months", false);
     scrollTo(date.year, "years", false);
   }, [isHeaderExpanded]);
diff --git a/packages/components/date-picker/__tests__/date-picker.test.tsx b/packages/components/date-picker/__tests__/date-picker.test.tsx
index d4d7c20971..56ab4b459f 100644
--- a/packages/components/date-picker/__tests__/date-picker.test.tsx
+++ b/packages/components/date-picker/__tests__/date-picker.test.tsx
@@ -457,5 +457,27 @@ describe("DatePicker", () => {
       expect(onChange).toHaveBeenCalledWith(new CalendarDate(2019, 2, 4));
       expect(getTextValue(combobox)).toBe("2/4/2019"); // uncontrolled
     });
+
+    it("should keep the selected date when the picker is opened, in showMonthAndYearPickers mode", function () {
+      const {getByRole, getAllByRole} = render(
+        <DatePicker showMonthAndYearPickers label="Date" value={new CalendarDate(2024, 5, 1)} />,
+      );
+
+      let combobox = getAllByRole("group")[0];
+
+      expect(getTextValue(combobox)).toBe("5/1/2024");
+
+      let button = getByRole("button");
+
+      triggerPress(button);
+
+      let dialog = getByRole("dialog");
+
+      expect(dialog).toBeVisible();
+
+      const content = getByRole("application");
+
+      expect(content).toHaveAttribute("aria-label", "May 2024");
+    });
   });
 });