From 7b3838cc670de7845bb5937d204e86cdba93b6e6 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 9 Feb 2022 13:57:55 -0500
Subject: [PATCH] fix(datetime): navigate to month within min range (#24759)

Resolves #24757
---
 core/src/components/datetime/datetime.tsx          | 11 +++++++----
 core/src/components/datetime/test/minmax/e2e.ts    | 14 ++++++++++++++
 .../src/components/datetime/test/minmax/index.html |  4 ++++
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 42ed82a73b..1f9ef3f15b 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -720,8 +720,8 @@ export class Datetime implements ComponentInterface {
         const { month, year, day } = refMonthFn(this.workingParts);
 
         if (isMonthDisabled({ month, year, day: null }, {
-          minParts: this.minParts,
-          maxParts: this.maxParts
+          minParts: { ...this.minParts, day: null },
+          maxParts: { ...this.maxParts, day: null }
         })) {
           return;
         }
@@ -1238,8 +1238,11 @@ export class Datetime implements ComponentInterface {
       year,
       day: null
     }, {
-      minParts: this.minParts,
-      maxParts: this.maxParts
+      // The day is not used when checking if a month is disabled.
+      // Users should be able to access the min or max month, even if the
+      // min/max date is out of bounds (e.g. min is set to Feb 15, Feb should not be disabled).
+      minParts: { ...this.minParts, day: null },
+      maxParts: { ...this.maxParts, day: null }
     });
     // The working month should never have swipe disabled.
     // Otherwise the CSS scroll snap will not work and the user
diff --git a/core/src/components/datetime/test/minmax/e2e.ts b/core/src/components/datetime/test/minmax/e2e.ts
index f040b65d66..ae8a90595b 100644
--- a/core/src/components/datetime/test/minmax/e2e.ts
+++ b/core/src/components/datetime/test/minmax/e2e.ts
@@ -47,3 +47,17 @@ test('datetime: minmax navigation disabled', async () => {
   expect(navButtons[1]).toHaveAttribute('disabled');
 
 });
+
+test('datetime: min including day should not disable month', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/datetime/test/minmax?ionic:_testing=true'
+  });
+
+  const calendarMonths = await page.findAll('ion-datetime#min-with-day >>> .calendar-month');
+
+  await page.waitForChanges();
+
+  expect(calendarMonths[0]).toHaveClass('calendar-month-disabled');
+  expect(calendarMonths[1]).not.toHaveClass('calendar-month-disabled');
+  expect(calendarMonths[2]).not.toHaveClass('calendar-month-disabled');
+})
diff --git a/core/src/components/datetime/test/minmax/index.html b/core/src/components/datetime/test/minmax/index.html
index 1f66778de1..848fc7cf3c 100644
--- a/core/src/components/datetime/test/minmax/index.html
+++ b/core/src/components/datetime/test/minmax/index.html
@@ -62,6 +62,10 @@
           <h2>locale: en-GB</h2>
           <ion-datetime locale="en-GB" presentation="time" min="19:30" value="20:30" max="20:40"></ion-datetime>
         </div>
+        <div class="grid-item">
+          <h2>Min with year/month/day</h2>
+          <ion-datetime id="min-with-day" min="2022-02-09" value="2022-02-09"></ion-datetime>
+        </div>
       </div>
     </ion-content>