fix(datetime): values are adjusted to be in bounds (#26125)

resolves #25894, resolves #25708

core/src/components/datetime/datetime.tsx

@@ -585,7 +585,7 @@ export class Datetime implements ComponentInterface {
   };
 
   private setActiveParts = (parts: DatetimeParts, removeDate = false) => {
-    const { multiple, activePartsClone } = this;
+    const { multiple, minParts, maxParts, activePartsClone } = this;
 
     /**
      * When setting the active parts, it is possible
@@ -597,7 +597,7 @@ export class Datetime implements ComponentInterface {
      * Additionally, we need to update the working parts
      * too in the event that the validated parts are different.
      */
-    const validatedParts = validateParts(parts);
+    const validatedParts = validateParts(parts, minParts, maxParts);
     this.setWorkingParts(validatedParts);
 
     if (multiple) {

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

@@ -14,6 +14,7 @@ import {
   calculateHourFromAMPM,
   subtractDays,
   addDays,
+  validateParts,
 } from '../utils/manipulation';
 
 describe('addDays()', () => {
@@ -487,3 +488,72 @@ describe('getPreviousYear()', () => {
     });
   });
 });
+
+describe('validateParts()', () => {
+  it('should move day in bounds', () => {
+    expect(validateParts({ month: 2, day: 31, year: 2022, hour: 8, minute: 0 })).toEqual({
+      month: 2,
+      day: 28,
+      year: 2022,
+      hour: 8,
+      minute: 0,
+    });
+  });
+  it('should move the hour back in bounds according to the min', () => {
+    expect(
+      validateParts(
+        { month: 1, day: 1, year: 2022, hour: 8, minute: 0 },
+        { month: 1, day: 1, year: 2022, hour: 9, minute: 0 }
+      )
+    ).toEqual({ month: 1, day: 1, year: 2022, hour: 9, minute: 0 });
+  });
+  it('should move the minute back in bounds according to the min', () => {
+    expect(
+      validateParts(
+        { month: 1, day: 1, year: 2022, hour: 9, minute: 20 },
+        { month: 1, day: 1, year: 2022, hour: 9, minute: 30 }
+      )
+    ).toEqual({ month: 1, day: 1, year: 2022, hour: 9, minute: 30 });
+  });
+  it('should move the hour and minute back in bounds according to the min', () => {
+    expect(
+      validateParts(
+        { month: 1, day: 1, year: 2022, hour: 8, minute: 30 },
+        { month: 1, day: 1, year: 2022, hour: 9, minute: 0 }
+      )
+    ).toEqual({ month: 1, day: 1, year: 2022, hour: 9, minute: 0 });
+  });
+  it('should move the hour back in bounds according to the max', () => {
+    expect(
+      validateParts({ month: 1, day: 1, year: 2022, hour: 10, minute: 0 }, undefined, {
+        month: 1,
+        day: 1,
+        year: 2022,
+        hour: 9,
+        minute: 0,
+      })
+    ).toEqual({ month: 1, day: 1, year: 2022, hour: 9, minute: 0 });
+  });
+  it('should move the minute back in bounds according to the max', () => {
+    expect(
+      validateParts({ month: 1, day: 1, year: 2022, hour: 9, minute: 40 }, undefined, {
+        month: 1,
+        day: 1,
+        year: 2022,
+        hour: 9,
+        minute: 30,
+      })
+    ).toEqual({ month: 1, day: 1, year: 2022, hour: 9, minute: 30 });
+  });
+  it('should move the hour and minute back in bounds according to the max', () => {
+    expect(
+      validateParts({ month: 1, day: 1, year: 2022, hour: 10, minute: 20 }, undefined, {
+        month: 1,
+        day: 1,
+        year: 2022,
+        hour: 9,
+        minute: 30,
+      })
+    ).toEqual({ month: 1, day: 1, year: 2022, hour: 9, minute: 30 });
+  });
+});

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

@@ -234,4 +234,53 @@ test.describe('datetime: minmax', () => {
     );
     await expect(hourPickerItems).toHaveText(['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']);
   });
+
+  test.describe('minmax value adjustment when out of bounds', () => {
+    test.beforeEach(({ skip }) => {
+      skip.rtl();
+      skip.mode('ios', 'This implementation is the same across modes.');
+    });
+    test('should reset to min time if out of bounds', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime
+          min="2022-10-10T08:00"
+          value="2022-10-11T06:00"
+        ></ion-datetime>
+      `);
+
+      await page.waitForSelector('.datetime-ready');
+
+      const datetime = page.locator('ion-datetime');
+      const ionChange = await page.spyOnEvent('ionChange');
+      const dayButton = page.locator('ion-datetime .calendar-day[data-day="10"][data-month="10"][data-year="2022"]');
+      await dayButton.click();
+
+      await ionChange.next();
+
+      const value = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value);
+      await expect(typeof value).toBe('string');
+      await expect(value!.includes('2022-10-10T08:00')).toBe(true);
+    });
+    test('should reset to max time if out of bounds', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime
+          max="2022-10-10T08:00"
+          value="2022-10-11T09:00"
+        ></ion-datetime>
+      `);
+
+      await page.waitForSelector('.datetime-ready');
+
+      const datetime = page.locator('ion-datetime');
+      const ionChange = await page.spyOnEvent('ionChange');
+      const dayButton = page.locator('ion-datetime .calendar-day[data-day="10"][data-month="10"][data-year="2022"]');
+      await dayButton.click();
+
+      await ionChange.next();
+
+      const value = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value);
+      await expect(typeof value).toBe('string');
+      await expect(value!.includes('2022-10-10T08:00')).toBe(true);
+    });
+  });
 });

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

@@ -1,5 +1,6 @@
 import type { DatetimeParts } from '../datetime-interface';
 
+import { isSameDay } from './comparison';
 import { getNumDaysInMonth } from './helpers';
 
 const twoDigit = (val: number | undefined): string => {
@@ -345,7 +346,11 @@ export const calculateHourFromAMPM = (currentParts: DatetimeParts, newAMPM: 'am'
  * values are valid. For days that do not exist,
  * the closest valid day is used.
  */
-export const validateParts = (parts: DatetimeParts): DatetimeParts => {
+export const validateParts = (
+  parts: DatetimeParts,
+  minParts?: DatetimeParts,
+  maxParts?: DatetimeParts
+): DatetimeParts => {
   const { month, day, year } = parts;
   const partsCopy = { ...parts };
 
@@ -361,5 +366,66 @@ export const validateParts = (parts: DatetimeParts): DatetimeParts => {
     partsCopy.day = numDays;
   }
 
+  /**
+   * If value is same day as min day,
+   * make sure the time value is in bounds.
+   */
+  if (minParts !== undefined && isSameDay(partsCopy, minParts)) {
+    /**
+     * If the hour is out of bounds,
+     * update both the hour and minute.
+     * This is done so that the new time
+     * is closest to what the user selected.
+     */
+    if (partsCopy.hour !== undefined && minParts.hour !== undefined) {
+      if (partsCopy.hour < minParts.hour) {
+        partsCopy.hour = minParts.hour;
+        partsCopy.minute = minParts.minute;
+
+        /**
+         * If only the minute is out of bounds,
+         * set it to the min minute.
+         */
+      } else if (
+        partsCopy.hour === minParts.hour &&
+        partsCopy.minute !== undefined &&
+        minParts.minute !== undefined &&
+        partsCopy.minute < minParts.minute
+      ) {
+        partsCopy.minute = minParts.minute;
+      }
+    }
+  }
+
+  /**
+   * If value is same day as max day,
+   * make sure the time value is in bounds.
+   */
+  if (maxParts !== undefined && isSameDay(parts, maxParts)) {
+    /**
+     * If the hour is out of bounds,
+     * update both the hour and minute.
+     * This is done so that the new time
+     * is closest to what the user selected.
+     */
+    if (partsCopy.hour !== undefined && maxParts.hour !== undefined) {
+      if (partsCopy.hour > maxParts.hour) {
+        partsCopy.hour = maxParts.hour;
+        partsCopy.minute = maxParts.minute;
+        /**
+         * If only the minute is out of bounds,
+         * set it to the max minute.
+         */
+      } else if (
+        partsCopy.hour === maxParts.hour &&
+        partsCopy.minute !== undefined &&
+        maxParts.minute !== undefined &&
+        partsCopy.minute > maxParts.minute
+      ) {
+        partsCopy.minute = maxParts.minute;
+      }
+    }
+  }
+
   return partsCopy;
 };