fix(datetime): navigate to month within min range (#24759)

Resolves #24757

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

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');
+})

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>