fix(datetime): prevent navigating to disabled months (#24421)

Resolves #24208, #24482

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

@@ -1,6 +1,6 @@
 import { newE2EPage } from '@stencil/core/testing';
 
-test('minmax', async () => {
+test('datetime: minmax', async () => {
   const page = await newE2EPage({
     url: '/src/components/datetime/test/minmax?ionic:_testing=true'
   });
@@ -20,3 +20,30 @@ test('minmax', async () => {
     expect(screenshotCompare).toMatchScreenshot();
   }
 });
+
+test('datetime: minmax months disabled', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/datetime/test/minmax?ionic:_testing=true'
+  });
+
+  const calendarMonths = await page.findAll('ion-datetime#inside >>> .calendar-month');
+
+  await page.waitForChanges();
+
+  expect(calendarMonths[0]).not.toHaveClass('calendar-month-disabled');
+  expect(calendarMonths[1]).not.toHaveClass('calendar-month-disabled');
+  expect(calendarMonths[2]).toHaveClass('calendar-month-disabled');
+
+});
+
+test('datetime: minmax navigation disabled', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/datetime/test/minmax?ionic:_testing=true'
+  });
+
+  const navButtons = await page.findAll('ion-datetime#outside >>> .calendar-next-prev ion-button');
+
+  expect(navButtons[0]).toHaveAttribute('disabled');
+  expect(navButtons[1]).toHaveAttribute('disabled');
+
+});

core/src/components/datetime/test/minmax/index.html

@@ -44,7 +44,7 @@
       <div class="grid">
         <div class="grid-item">
           <h2>Value inside Bounds</h2>
-          <ion-datetime id="inside" min="2021-09" max="2021-10"></ion-datetime>
+          <ion-datetime id="inside" min="2021-09" max="2021-10" value="2021-10-01"></ion-datetime>
         </div>
         <div class="grid-item">
           <h2>Value Outside Bounds</h2>

core/src/components/datetime/test/state.spec.ts

@@ -1,6 +1,8 @@
 import {
   getCalendarDayState,
-  isDayDisabled
+  isDayDisabled,
+  isNextMonthDisabled,
+  isPrevMonthDisabled
 } from '../utils/state';
 
 describe('getCalendarDayState()', () => {
@@ -73,3 +75,58 @@ describe('isDayDisabled()', () => {
     expect(isDayDisabled(refDate, undefined, { month: 5, day: 11, year: 2021 })).toEqual(true);
   })
 });
+
+describe('isPrevMonthDisabled()', () => {
+
+  it('should return true', () => {
+    // Date month is before min month, in the same year
+    expect(isPrevMonthDisabled({ month: 5, year: 2021, day: null }, { month: 6, year: 2021, day: null })).toEqual(true);
+    // Date month and year is the same as min month and year
+    expect(isPrevMonthDisabled({ month: 1, year: 2021, day: null }, { month: 1, year: 2021, day: null })).toEqual(true);
+    // Date year is the same as min year (month not provided)
+    expect(isPrevMonthDisabled({ month: 1, year: 2021, day: null }, { year: 2021, month: null, day: null })).toEqual(true);
+    // Date year is less than the min year (month not provided)
+    expect(isPrevMonthDisabled({ month: 5, year: 2021, day: null }, { year: 2022, month: null, day: null })).toEqual(true);
+
+    // Date is above the maximum bounds and the previous month does not does not fall within the
+    // min-max range.
+    expect(isPrevMonthDisabled({ month: 12, year: 2021, day: null }, { month: 9, year: 2021, day: null }, { month: 10, year: 2021, day: null })).toEqual(true);
+
+    // Date is above the maximum bounds and a year ahead of the max range. The previous month/year
+    // does not fall within the min-max range.
+    expect(isPrevMonthDisabled({ month: 1, year: 2022, day: null }, { month: 9, year: 2021, day: null }, { month: 10, year: 2021, day: null })).toEqual(true);
+
+  });
+
+  it('should return false', () => {
+    // No min range provided
+    expect(isPrevMonthDisabled({ month: 12, year: 2021, day: null })).toEqual(false);
+    // Date year is the same as min year,
+    // but can navigate to a previous month without reducing the year.
+    expect(isPrevMonthDisabled({ month: 12, year: 2021, day: null }, { year: 2021, month: null, day: null })).toEqual(false);
+    expect(isPrevMonthDisabled({ month: 2, year: 2021, day: null }, { year: 2021, month: null, day: null })).toEqual(false);
+  });
+
+});
+
+describe('isNextMonthDisabled()', () => {
+
+  it('should return true', () => {
+    // Date month is the same as max month (in the same year)
+    expect(isNextMonthDisabled({ month: 10, year: 2021, day: null }, { month: 10, year: 2021, day: null })).toEqual(true);
+    // Date month is after the max month (in the same year)
+    expect(isNextMonthDisabled({ month: 10, year: 2021, day: null }, { month: 9, year: 2021, day: null })).toEqual(true);
+    // Date year is after the max month and year
+    expect(isNextMonthDisabled({ month: 10, year: 2022, day: null }, { month: 12, year: 2021, day: null })).toEqual(true);
+  });
+
+  it('should return false', () => {
+    // No max range provided
+    expect(isNextMonthDisabled({ month: 10, year: 2021, day: null })).toBe(false);
+    // Date month is before max month and is the previous month,
+    // so that navigating the next month would re-enter the max range
+    expect(isNextMonthDisabled({ month: 10, year: 2021, day: null }, { month: 11, year: 2021, day: null })).toEqual(false);
+  });
+
+});
+