fix(datetime): arrow navigation respects min/max values (#25182)

Resolves #25073

core/src/components/datetime/test/minmax/datetime.e2e.ts

@@ -0,0 +1,50 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('datetime: minmax', () => {
+  test('calendar arrow navigation should respect min/max values', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/ionic-team/ionic-framework/issues/25073',
+    });
+
+    await page.setContent(`
+      <ion-datetime min="2022-04-22" max="2022-05-21" value="2022-04-22T10:00:00"></ion-datetime>
+
+      <script>
+        const observer = new MutationObserver((mutationRecords) => {
+          if (mutationRecords) {
+            window.dispatchEvent(new CustomEvent('datetimeMonthDidChange'));
+          }
+        });
+
+        const initDatetimeChangeEvent = () => {
+          observer.observe(document.querySelector('ion-datetime').shadowRoot.querySelector('.calendar-body'), {
+            subtree: true,
+            childList: true
+          });
+        }
+      </script>
+  `);
+
+    await page.waitForSelector('.datetime-ready');
+
+    const prevButton = page.locator('ion-datetime .calendar-next-prev ion-button:nth-child(1)');
+    const nextButton = page.locator('ion-datetime .calendar-next-prev ion-button:nth-child(2)');
+
+    expect(nextButton).toBeEnabled();
+    expect(prevButton).toBeDisabled();
+
+    await page.evaluate('initDatetimeChangeEvent()');
+
+    const monthDidChangeSpy = await page.spyOnEvent('datetimeMonthDidChange');
+
+    await nextButton.click();
+    await page.waitForChanges();
+
+    await monthDidChangeSpy.next();
+
+    expect(nextButton).toBeDisabled();
+    expect(prevButton).toBeEnabled();
+  });
+});

core/src/components/datetime/utils/comparison.ts

@@ -18,7 +18,8 @@ export const isBefore = (baseParts: DatetimeParts, compareParts: DatetimeParts)
     (baseParts.year === compareParts.year && baseParts.month < compareParts.month) ||
     (baseParts.year === compareParts.year &&
       baseParts.month === compareParts.month &&
-      baseParts.day! < compareParts.day!)
+      baseParts.day &&
+      baseParts.day < compareParts.day!)
   );
 };
 
@@ -31,6 +32,7 @@ export const isAfter = (baseParts: DatetimeParts, compareParts: DatetimeParts) =
     (baseParts.year === compareParts.year && baseParts.month > compareParts.month) ||
     (baseParts.year === compareParts.year &&
       baseParts.month === compareParts.month &&
-      baseParts.day! > compareParts.day!)
+      baseParts.day &&
+      baseParts.day > compareParts.day!)
   );
 };

core/src/components/datetime/utils/state.ts

@@ -140,7 +140,10 @@ export const isMonthDisabled = (
  * previous navigation button is disabled.
  */
 export const isPrevMonthDisabled = (refParts: DatetimeParts, minParts?: DatetimeParts, maxParts?: DatetimeParts) => {
-  const prevMonth = getPreviousMonth(refParts);
+  const prevMonth = {
+    ...getPreviousMonth(refParts),
+    day: null,
+  };
   return isMonthDisabled(prevMonth, {
     minParts,
     maxParts,
@@ -152,7 +155,10 @@ export const isPrevMonthDisabled = (refParts: DatetimeParts, minParts?: Datetime
  * determine if the next navigation button is disabled.
  */
 export const isNextMonthDisabled = (refParts: DatetimeParts, maxParts?: DatetimeParts) => {
-  const nextMonth = getNextMonth(refParts);
+  const nextMonth = {
+    ...getNextMonth(refParts),
+    day: null,
+  };
   return isMonthDisabled(nextMonth, {
     maxParts,
   });