fix(datetime): add dev warnings when setting out of bounds value

core/src/components/datetime/datetime.tsx

@@ -11,6 +11,7 @@ import { isRTL } from '../../utils/rtl';
 import { createColorClasses } from '../../utils/theme';
 import type { PickerColumnItem } from '../picker-column-internal/picker-column-internal-interfaces';
 
+import { isAfter, isBefore, isSameDay } from './utils/comparison';
 import {
   generateMonths,
   generateTime,
@@ -326,6 +327,10 @@ export class Datetime implements ComponentInterface {
        */
       const valueDateParts = parseDate(this.value);
       if (valueDateParts) {
+        if (isBefore(valueDateParts, this.minParts) || isAfter(valueDateParts, this.maxParts)) {
+          printIonWarning('The value passed to ion-datetime is earlier than the min or later than the max.');
+        }
+
         const { month, day, year, hour, minute } = valueDateParts;
         const ampm = hour >= 12 ? 'pm' : 'am';
 
@@ -1084,7 +1089,13 @@ export class Datetime implements ComponentInterface {
   private processValue = (value?: string | null) => {
     this.highlightActiveParts = !!value;
     const valueToProcess = parseDate(value || getToday());
-    const { month, day, year, hour, minute, tzOffset } = clampDate(valueToProcess, this.minParts, this.maxParts);
+    const clampedDate = clampDate(valueToProcess, this.minParts, this.maxParts);
+
+    if (!isSameDay(valueToProcess, clampedDate)) {
+      printIonWarning('The value passed to ion-datetime is earlier than the min or later than the max.');
+    }
+
+    const { month, day, year, hour, minute, tzOffset } = clampedDate;
 
     this.setWorkingParts({
       month,

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

@@ -47,6 +47,7 @@ test.describe('datetime: minmax', () => {
     expect(nextButton).toBeDisabled();
     expect(prevButton).toBeEnabled();
   });
+
   test('datetime: minmax months disabled', async ({ page }) => {
     await page.goto('/src/components/datetime/test/minmax');
     const calendarMonths = page.locator('ion-datetime#inside .calendar-month');
@@ -67,6 +68,7 @@ test.describe('datetime: minmax', () => {
     expect(navButtons.nth(0)).toHaveAttribute('disabled', '');
     expect(navButtons.nth(1)).toHaveAttribute('disabled', '');
   });
+
   test('datetime: min including day should not disable month', async ({ page }) => {
     await page.goto('/src/components/datetime/test/minmax');
     await page.waitForSelector('.datetime-ready');
@@ -77,6 +79,7 @@ test.describe('datetime: minmax', () => {
     expect(calendarMonths.nth(1)).not.toHaveClass(/calendar-month-disabled/);
     expect(calendarMonths.nth(2)).not.toHaveClass(/calendar-month-disabled/);
   });
+
   test.describe('when the datetime does not have a value', () => {
     test('all time values should be available for selection', async ({ page }) => {
       /**
@@ -105,4 +108,15 @@ test.describe('datetime: minmax', () => {
       expect(await minutes.count()).toBe(60);
     });
   });
+
+  test('setting value outside bounds should show in-bounds month', async ({ page }) => {
+    await page.setContent(`
+      <ion-datetime min="2021-06-01" max="2021-06-30" value="2021-05-01"></ion-datetime>
+    `);
+
+    await page.waitForSelector('.datetime-ready');
+
+    const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+    expect(calendarMonthYear).toHaveText('June 2021');
+  });
 });