@ionic/core 7.3.2-dev.11693321763.15a54694 → 7.3.2-dev.11693507138.1f9ed625

package/dist/collection/components/checkbox/checkbox.js

@@ -55,6 +55,7 @@ export class Checkbox {
     this.value = 'on';
     this.labelPlacement = 'start';
     this.justify = 'space-between';
+    this.alignment = 'center';
     this.legacy = undefined;
   }
   // TODO(FW-3100): remove this
@@ -92,7 +93,7 @@ export class Checkbox {
     return legacyFormController.hasLegacyControl() ? this.renderLegacyCheckbox() : this.renderCheckbox();
   }
   renderCheckbox() {
-    const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, } = this;
+    const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, } = this;
     const mode = getIonMode(this);
     const path = getSVGPath(mode, indeterminate);
     renderHiddenInput(true, el, name, checked ? value : '', disabled);
@@ -104,6 +105,7 @@ export class Checkbox {
         'checkbox-indeterminate': indeterminate,
         interactive: true,
         [`checkbox-justify-${justify}`]: true,
+        [`checkbox-alignment-${alignment}`]: true,
         [`checkbox-label-placement-${labelPlacement}`]: true,
       }) }, h("label", { class: "checkbox-wrapper" }, h("input", Object.assign({ type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), h("div", { class: {
         'label-text-wrapper': true,
@@ -280,15 +282,15 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'start' | 'end' | 'fixed'",
-          "resolved": "\"end\" | \"fixed\" | \"start\"",
+          "original": "'start' | 'end' | 'fixed' | 'stacked'",
+          "resolved": "\"end\" | \"fixed\" | \"stacked\" | \"start\"",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Where to place the label relative to the checkbox.\n`\"start\"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\")."
+          "text": "Where to place the label relative to the checkbox.\n`\"start\"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\n`\"stacked\"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property."
         },
         "attribute": "label-placement",
         "reflect": false,
@@ -312,6 +314,24 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         "reflect": false,
         "defaultValue": "'space-between'"
       },
+      "alignment": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'start' | 'center'",
+          "resolved": "\"center\" | \"start\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "How to control the alignment of the checkbox and label on the cross axis.\n`\"start\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\n`\"center\"`: The label and control will appear at the center of the cross axis in both LTR and RTL."
+        },
+        "attribute": "alignment",
+        "reflect": false,
+        "defaultValue": "'center'"
+      },
       "legacy": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/checkbox/checkbox.md.css

@@ -124,6 +124,15 @@
   margin-bottom: 10px;
 }
 
+:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper {
+  margin-top: 10px;
+  margin-bottom: 16px;
+}
+
+:host(.in-item.checkbox-label-placement-stacked) .native-wrapper {
+  margin-bottom: 10px;
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -198,6 +207,14 @@ input {
   justify-content: end;
 }
 
+:host(.checkbox-alignment-start) .checkbox-wrapper {
+  align-items: start;
+}
+
+:host(.checkbox-alignment-center) .checkbox-wrapper {
+  align-items: center;
+}
+
 /**
  * Label is on the left of the checkbox in LTR and
  * on the right in RTL.
@@ -261,6 +278,24 @@ input {
   max-width: 200px;
 }
 
+/**
+ * Label is on top of the checkbox.
+ */
+:host(.checkbox-label-placement-stacked) .checkbox-wrapper {
+  flex-direction: column;
+}
+
+:host(.checkbox-label-placement-stacked) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the checkbox should be on the bottom
+   * when the label sits at the top.
+   */
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 16px;
+}
+
 :host(.checkbox-checked) .checkbox-icon,
 :host(.checkbox-indeterminate) .checkbox-icon {
   border-color: var(--border-color-checked);

package/dist/collection/components/checkbox/test/item/checkbox.e2e.js

@@ -58,4 +58,17 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
       expect(await list.screenshot()).toMatchSnapshot(screenshot(`checkbox-long-label-in-item`));
     });
   });
+  test.describe(title('checkbox: stacked label in item'), () => {
+    test('should render margins correctly when using stacked label in item', async ({ page }) => {
+      await page.setContent(`
+          <ion-list>
+            <ion-item>
+              <ion-checkbox label-placement="stacked">Enable Notifications</ion-checkbox>
+            </ion-item>
+          </ion-list>
+        `, config);
+      const list = page.locator('ion-list');
+      await expect(list).toHaveScreenshot(screenshot(`checkbox-stacked-label-in-item`));
+    });
+  });
 });

package/dist/collection/components/checkbox/test/label/checkbox.e2e.js

@@ -91,5 +91,21 @@ configs().forEach(({ title, screenshot, config }) => {
         expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-label-fixed-justify-space-between`));
       });
     });
+    test.describe('checkbox: stacked placement', () => {
+      test('should align the label to the start of the container in the stacked position', async ({ page }) => {
+        await page.setContent(`
+            <ion-checkbox label-placement="stacked" alignment="start" style="width: 200px">This is a long label</ion-checkbox>
+          `, config);
+        const checkbox = page.locator('ion-checkbox');
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-stacked-align-start`));
+      });
+      test('should align the label to the center of the container in the stacked position', async ({ page }) => {
+        await page.setContent(`
+            <ion-checkbox label-placement="stacked" alignment="center" style="width: 200px">This is a long label</ion-checkbox>
+          `, config);
+        const checkbox = page.locator('ion-checkbox');
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-stacked-align-center`));
+      });
+    });
   });
 });

package/dist/collection/components/datetime/datetime.js

@@ -38,11 +38,6 @@ export class Datetime {
   constructor() {
     this.inputId = `ion-dt-${datetimeIds++}`;
     this.prevPresentation = null;
-    /**
-     * Duplicate reference to `activeParts` that does not trigger a re-render of the component.
-     * Allows caching an instance of the `activeParts` in between render cycles.
-     */
-    this.activePartsClone = [];
     this.warnIfIncorrectValueUsage = () => {
       const { multiple, value } = this;
       if (!multiple && Array.isArray(value)) {
@@ -70,9 +65,9 @@ export class Datetime {
      * data. This should be used when rendering an
      * interface in an environment where the `value`
      * may not be set. This function works
-     * by returning the first selected date in
-     * "activePartsClone" and then falling back to
-     * defaultParts if no active date is selected.
+     * by returning the first selected date and then
+     * falling back to defaultParts if no active date
+     * is selected.
      */
     this.getActivePartsWithFallback = () => {
       var _a;
@@ -80,8 +75,8 @@ export class Datetime {
       return (_a = this.getActivePart()) !== null && _a !== void 0 ? _a : defaultParts;
     };
     this.getActivePart = () => {
-      const { activePartsClone } = this;
-      return Array.isArray(activePartsClone) ? activePartsClone[0] : activePartsClone;
+      const { activeParts } = this;
+      return Array.isArray(activeParts) ? activeParts[0] : activeParts;
     };
     this.closeParentOverlay = () => {
       const popoverOrModal = this.el.closest('ion-modal, ion-popover');
@@ -93,7 +88,7 @@ export class Datetime {
       this.workingParts = Object.assign({}, parts);
     };
     this.setActiveParts = (parts, removeDate = false) => {
-      const { multiple, minParts, maxParts, activePartsClone } = this;
+      const { multiple, minParts, maxParts, activeParts } = this;
       /**
        * When setting the active parts, it is possible
        * to set invalid data. For example,
@@ -107,16 +102,7 @@ export class Datetime {
       const validatedParts = validateParts(parts, minParts, maxParts);
       this.setWorkingParts(validatedParts);
       if (multiple) {
-        /**
-         * We read from activePartsClone here because valueChanged() only updates that,
-         * so it's the more reliable source of truth. If we read from activeParts, then
-         * if you click July 1, manually set the value to July 2, and then click July 3,
-         * the new value would be [July 1, July 3], ignoring the value set.
-         *
-         * We can then pass the new value to activeParts (rather than activePartsClone)
-         * since the clone will be updated automatically by activePartsChanged().
-         */
-        const activePartsArray = Array.isArray(activePartsClone) ? activePartsClone : [activePartsClone];
+        const activePartsArray = Array.isArray(activeParts) ? activeParts : [activeParts];
         if (removeDate) {
           this.activeParts = activePartsArray.filter((p) => !isSameDay(p, validatedParts));
         }
@@ -333,6 +319,19 @@ export class Datetime {
           const monthBox = month.getBoundingClientRect();
           if (Math.abs(monthBox.x - box.x) > 2)
             return;
+          /**
+           * If we're force-rendering a month, assume we've
+           * scrolled to that and return it.
+           *
+           * If forceRenderDate is ever used in a context where the
+           * forced month is not immediately auto-scrolled to, this
+           * should be updated to also check whether `month` has the
+           * same month and year as the forced date.
+           */
+          const { forceRenderDate } = this;
+          if (forceRenderDate !== undefined) {
+            return { month: forceRenderDate.month, year: forceRenderDate.year, day: forceRenderDate.day };
+          }
           /**
            * From here, we can determine if the start
            * month or the end month was scrolled into view.
@@ -387,6 +386,9 @@ export class Datetime {
             this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), { month, day: day, year }));
             calendarBodyRef.scrollLeft = workingMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
             calendarBodyRef.style.removeProperty('overflow');
+            if (this.resolveForceDateScrolling) {
+              this.resolveForceDateScrolling();
+            }
           });
         };
         /**
@@ -441,10 +443,17 @@ export class Datetime {
       }
     };
     this.processValue = (value) => {
-      const hasValue = value !== null && value !== undefined;
+      const hasValue = value !== null && value !== undefined && (!Array.isArray(value) || value.length > 0);
       const valueToProcess = hasValue ? parseDate(value) : this.defaultParts;
-      const { minParts, maxParts } = this;
+      const { minParts, maxParts, workingParts, el } = this;
       this.warnIfIncorrectValueUsage();
+      /**
+       * Return early if the value wasn't parsed correctly, such as
+       * if an improperly formatted date string was provided.
+       */
+      if (!valueToProcess) {
+        return;
+      }
       /**
        * Datetime should only warn of out of bounds values
        * if set by the user. If the `value` is undefined,
@@ -462,16 +471,9 @@ export class Datetime {
        * that the values don't necessarily have to be in order.
        */
       const singleValue = Array.isArray(valueToProcess) ? valueToProcess[0] : valueToProcess;
-      const { month, day, year, hour, minute } = clampDate(singleValue, minParts, maxParts);
+      const targetValue = clampDate(singleValue, minParts, maxParts);
+      const { month, day, year, hour, minute } = targetValue;
       const ampm = parseAmPm(hour);
-      this.setWorkingParts({
-        month,
-        day,
-        year,
-        hour,
-        minute,
-        ampm,
-      });
       /**
        * Since `activeParts` indicates a value that
        * been explicitly selected either by the
@@ -501,6 +503,62 @@ export class Datetime {
          */
         this.activeParts = [];
       }
+      /**
+       * Only animate if:
+       * 1. We're using grid style (wheel style pickers should just jump to new value)
+       * 2. The month and/or year actually changed, and both are defined (otherwise there's nothing to animate to)
+       * 3. The calendar body is visible (prevents animation when in collapsed datetime-button, for example)
+       * 4. The month/year picker is not open (since you wouldn't see the animation anyway)
+       */
+      const didChangeMonth = (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
+      const bodyIsVisible = el.classList.contains('datetime-ready');
+      const { isGridStyle, showMonthAndYear } = this;
+      if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
+        this.animateToDate(targetValue);
+      }
+      else {
+        /**
+         * We only need to do this if we didn't just animate to a new month,
+         * since that calls prevMonth/nextMonth which calls setWorkingParts for us.
+         */
+        this.setWorkingParts({
+          month,
+          day,
+          year,
+          hour,
+          minute,
+          ampm,
+        });
+      }
+    };
+    this.animateToDate = async (targetValue) => {
+      const { workingParts } = this;
+      /**
+       * Tell other render functions that we need to force the
+       * target month to appear in place of the actual next/prev month.
+       * Because this is a State variable, a rerender will be triggered
+       * automatically, updating the rendered months.
+       */
+      this.forceRenderDate = targetValue;
+      /**
+       * Flag that we've started scrolling to the forced date.
+       * The resolve function will be called by the datetime's
+       * scroll listener when it's done updating everything.
+       * This is a replacement for making prev/nextMonth async,
+       * since the logic we're waiting on is in a listener.
+       */
+      const forceDateScrollingPromise = new Promise((resolve) => {
+        this.resolveForceDateScrolling = resolve;
+      });
+      /**
+       * Animate smoothly to the forced month. This will also update
+       * workingParts and correct the surrounding months for us.
+       */
+      const targetMonthIsBefore = isBefore(targetValue, workingParts);
+      targetMonthIsBefore ? this.prevMonth() : this.nextMonth();
+      await forceDateScrollingPromise;
+      this.resolveForceDateScrolling = undefined;
+      this.forceRenderDate = undefined;
     };
     this.onFocus = () => {
       this.ionFocus.emit();
@@ -556,6 +614,7 @@ export class Datetime {
       ampm: 'pm',
     };
     this.isTimePopoverOpen = false;
+    this.forceRenderDate = undefined;
     this.color = 'primary';
     this.name = this.inputId;
     this.disabled = false;
@@ -595,6 +654,11 @@ export class Datetime {
   maxChanged() {
     this.processMaxParts();
   }
+  get isGridStyle() {
+    const { presentation, preferWheel } = this;
+    const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
+    return hasDatePresentation && !preferWheel;
+  }
   yearValuesChanged() {
     this.parsedYearValues = convertToArrayOfNumbers(this.yearValues);
   }
@@ -610,51 +674,13 @@ export class Datetime {
   minuteValuesChanged() {
     this.parsedMinuteValues = convertToArrayOfNumbers(this.minuteValues);
   }
-  activePartsChanged() {
-    this.activePartsClone = this.activeParts;
-  }
   /**
    * Update the datetime value when the value changes
    */
-  valueChanged() {
-    const { value, minParts, maxParts, workingParts } = this;
+  async valueChanged() {
+    const { value } = this;
     if (this.hasValue()) {
-      this.warnIfIncorrectValueUsage();
-      /**
-       * Clones the value of the `activeParts` to the private clone, to update
-       * the date display on the current render cycle without causing another render.
-       *
-       * This allows us to update the current value's date/time display without
-       * refocusing or shifting the user's display (leaves the user in place).
-       */
-      const valueDateParts = parseDate(value);
-      if (valueDateParts) {
-        warnIfValueOutOfBounds(valueDateParts, minParts, maxParts);
-        if (Array.isArray(valueDateParts)) {
-          this.activePartsClone = [...valueDateParts];
-        }
-        else {
-          const { month, day, year, hour, minute } = valueDateParts;
-          const ampm = hour != null ? (hour >= 12 ? 'pm' : 'am') : undefined;
-          this.activePartsClone = Object.assign(Object.assign({}, this.activeParts), { month,
-            day,
-            year,
-            hour,
-            minute,
-            ampm });
-          /**
-           * The working parts am/pm value must be updated when the value changes, to
-           * ensure the time picker hour column values are generated correctly.
-           *
-           * Note that we don't need to do this if valueDateParts is an array, since
-           * multiple="true" does not apply to time pickers.
-           */
-          this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm }));
-        }
-      }
-      else {
-        printIonWarning(`Unable to parse date string: ${value}. Please provide a valid ISO 8601 datetime string.`);
-      }
+      this.processValue(value);
     }
     this.emitStyle();
     this.ionValueChange.emit({ value });
@@ -857,8 +883,6 @@ export class Datetime {
         printIonWarning('The highlightedDates property is not supported with preferWheel="true".', el);
       }
     }
-    this.processMinParts();
-    this.processMaxParts();
     const hourValues = (this.parsedHourValues = convertToArrayOfNumbers(this.hourValues));
     const minuteValues = (this.parsedMinuteValues = convertToArrayOfNumbers(this.minuteValues));
     const monthValues = (this.parsedMonthValues = convertToArrayOfNumbers(this.monthValues));
@@ -866,6 +890,8 @@ export class Datetime {
     const dayValues = (this.parsedDayValues = convertToArrayOfNumbers(this.dayValues));
     const todayParts = (this.todayParts = parseDate(getToday()));
     this.defaultParts = getClosestValidDate(todayParts, monthValues, dayValues, yearValues, hourValues, minuteValues);
+    this.processMinParts();
+    this.processMaxParts();
     this.processValue(this.value);
     this.emitStyle();
   }
@@ -1250,7 +1276,7 @@ export class Datetime {
       const { el, highlightedDates, isDateEnabled, multiple } = this;
       const referenceParts = { month, day, year };
       const isCalendarPadding = day === null;
-      const { isActive, isToday, ariaLabel, ariaSelected, disabled, text } = getCalendarDayState(this.locale, referenceParts, this.activePartsClone, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues);
+      const { isActive, isToday, ariaLabel, ariaSelected, disabled, text } = getCalendarDayState(this.locale, referenceParts, this.activeParts, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues);
       const dateIsoString = convertDataToISO(referenceParts);
       let isCalDayDisabled = isCalMonthDisabled || disabled;
       if (!isCalDayDisabled && isDateEnabled !== undefined) {
@@ -1307,7 +1333,7 @@ export class Datetime {
     }))));
   }
   renderCalendarBody() {
-    return (h("div", { class: "calendar-body ion-focusable", ref: (el) => (this.calendarBodyRef = el), tabindex: "0" }, generateMonths(this.workingParts).map(({ month, year }) => {
+    return (h("div", { class: "calendar-body ion-focusable", ref: (el) => (this.calendarBodyRef = el), tabindex: "0" }, generateMonths(this.workingParts, this.forceRenderDate).map(({ month, year }) => {
       return this.renderMonth(month, year);
     })));
   }
@@ -1462,14 +1488,13 @@ export class Datetime {
     }
   }
   render() {
-    const { name, value, disabled, el, color, readonly, showMonthAndYear, preferWheel, presentation, size } = this;
+    const { name, value, disabled, el, color, readonly, showMonthAndYear, preferWheel, presentation, size, isGridStyle, } = this;
     const mode = getIonMode(this);
     const isMonthAndYearPresentation = presentation === 'year' || presentation === 'month' || presentation === 'month-year';
     const shouldShowMonthAndYear = showMonthAndYear || isMonthAndYearPresentation;
     const monthYearPickerOpen = showMonthAndYear && !isMonthAndYearPresentation;
     const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
     const hasWheelVariant = hasDatePresentation && preferWheel;
-    const hasGrid = hasDatePresentation && !preferWheel;
     renderHiddenInput(true, el, name, formatValue(value), disabled);
     return (h(Host, { "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
         [mode]: true,
@@ -1480,7 +1505,7 @@ export class Datetime {
         [`datetime-presentation-${presentation}`]: true,
         [`datetime-size-${size}`]: true,
         [`datetime-prefer-wheel`]: hasWheelVariant,
-        [`datetime-grid`]: hasGrid,
+        [`datetime-grid`]: isGridStyle,
       })) }, this.renderDatetime(mode)));
   }
   static get is() { return "ion-datetime"; }
@@ -2039,7 +2064,8 @@ export class Datetime {
       "showMonthAndYear": {},
       "activeParts": {},
       "workingParts": {},
-      "isTimePopoverOpen": {}
+      "isTimePopoverOpen": {},
+      "forceRenderDate": {}
     };
   }
   static get events() {
@@ -2267,9 +2293,6 @@ export class Datetime {
       }, {
         "propName": "minuteValues",
         "methodName": "minuteValuesChanged"
-      }, {
-        "propName": "activeParts",
-        "methodName": "activePartsChanged"
       }, {
         "propName": "value",
         "methodName": "valueChanged"

package/dist/collection/components/datetime/test/prefer-wheel/datetime.e2e.js

@@ -184,6 +184,21 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         await yearValues.nth(10).click();
         await ionChange.next();
       });
+      test('should jump to selected date when programmatically updating value', async ({ page }) => {
+        await page.setContent(`
+            <ion-datetime presentation="date" prefer-wheel="true" min="2019-05-05" max="2023-10-01" value="2019-05-30"></ion-datetime>
+          `, config);
+        await page.waitForSelector('.datetime-ready');
+        const datetime = page.locator('ion-datetime');
+        await datetime.evaluate((el) => (el.value = '2021-05-25T12:40:00.000Z'));
+        await page.waitForChanges();
+        const selectedMonth = datetime.locator('.month-column .picker-item-active');
+        const selectedDay = datetime.locator('.day-column .picker-item-active');
+        const selectedYear = datetime.locator('.year-column .picker-item-active');
+        await expect(selectedMonth).toHaveText(/May/);
+        await expect(selectedDay).toHaveText(/25/);
+        await expect(selectedYear).toHaveText(/2021/);
+      });
       test.describe('datetime: date wheel localization', () => {
         test('should correctly localize the date data', async ({ page }) => {
           await page.setContent(`

package/dist/collection/components/datetime/test/set-value/datetime.e2e.js

@@ -30,24 +30,21 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await page.waitForSelector('.datetime-ready');
       const datetime = page.locator('ion-datetime');
       const activeDayButton = page.locator('.calendar-day-active');
-      const monthYearButton = page.locator('.calendar-month-year');
-      const monthColumn = page.locator('.month-column');
-      const ionChange = await page.spyOnEvent('ionChange');
       await datetime.evaluate((el) => (el.value = '2021-10-05'));
-      // Open month/year picker
-      await monthYearButton.click();
-      await page.waitForChanges();
-      // Select October 2021
-      // The year will automatically switch to 2021 when selecting 10
-      await monthColumn.locator('.picker-item[data-value="10"]').click();
-      await ionChange.next();
-      // Close month/year picker
-      await monthYearButton.click();
       await page.waitForChanges();
       // Check that correct day is highlighted
       await expect(activeDayButton).toHaveAttribute('data-day', '5');
       await expect(activeDayButton).toHaveAttribute('data-month', '10');
       await expect(activeDayButton).toHaveAttribute('data-year', '2021');
     });
+    test('should scroll to new month when value is initially set and then updated', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/set-value', config);
+      await page.waitForSelector('.datetime-ready');
+      const datetime = page.locator('ion-datetime');
+      await datetime.evaluate((el) => (el.value = '2021-05-25T12:40:00.000Z'));
+      await page.waitForChanges();
+      const calendarHeader = datetime.locator('.calendar-month-year');
+      await expect(calendarHeader).toHaveText(/May 2021/);
+    });
   });
 });

package/dist/collection/components/datetime/utils/data.js

@@ -220,12 +220,20 @@ export const generateTime = (refParts, hourCycle = 'h12', minParts, maxParts, ho
  * Given DatetimeParts, generate the previous,
  * current, and and next months.
  */
-export const generateMonths = (refParts) => {
-  return [
-    getPreviousMonth(refParts),
-    { month: refParts.month, year: refParts.year, day: refParts.day },
-    getNextMonth(refParts),
-  ];
+export const generateMonths = (refParts, forcedDate) => {
+  const current = { month: refParts.month, year: refParts.year, day: refParts.day };
+  /**
+   * If we're forcing a month to appear, and it's different from the current month,
+   * ensure it appears by replacing the next or previous month as appropriate.
+   */
+  if (forcedDate !== undefined && (refParts.month !== forcedDate.month || refParts.year !== forcedDate.year)) {
+    const forced = { month: forcedDate.month, year: forcedDate.year, day: forcedDate.day };
+    const forcedMonthIsBefore = isBefore(forced, current);
+    return forcedMonthIsBefore
+      ? [forced, current, getNextMonth(refParts)]
+      : [getPreviousMonth(refParts), current, forced];
+  }
+  return [getPreviousMonth(refParts), current, getNextMonth(refParts)];
 };
 export const getMonthColumnData = (locale, refParts, minParts, maxParts, monthValues, formatOptions = {
   month: 'long',

package/dist/collection/components/datetime/utils/parse.js

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { printIonWarning } from "../../../utils/logging/index";
 import { isAfter, isBefore } from "./comparison";
 import { getNumDaysInMonth } from "./helpers";
 const ISO_8601_REGEXP = 
@@ -47,7 +48,22 @@ export const getPartsFromCalendarDay = (el) => {
 };
 export function parseDate(val) {
   if (Array.isArray(val)) {
-    return val.map((valStr) => parseDate(valStr));
+    const parsedArray = [];
+    for (const valStr of val) {
+      const parsedVal = parseDate(valStr);
+      /**
+       * If any of the values weren't parsed correctly, consider
+       * the entire batch incorrect. This simplifies the type
+       * signatures by having "undefined" be a general error case
+       * instead of returning (Datetime | undefined)[], which is
+       * harder for TS to perform type narrowing on.
+       */
+      if (!parsedVal) {
+        return undefined;
+      }
+      parsedArray.push(parsedVal);
+    }
+    return parsedArray;
   }
   // manually parse IS0 cuz Date.parse cannot be trusted
   // ISO 8601 format: 1994-12-15T13:47:20Z
@@ -67,6 +83,7 @@ export function parseDate(val) {
   }
   if (parse === null) {
     // wasn't able to parse the ISO datetime
+    printIonWarning(`Unable to parse date string: ${val}. Please provide a valid ISO 8601 datetime string.`);
     return undefined;
   }
   // ensure all the parse values exist with at least 0

package/dist/collection/components/datetime-button/datetime-button.js

@@ -54,6 +54,9 @@ export class DatetimeButton {
        * to today's date and time if no value is set.
        */
       const parsedDatetimes = parseDate(parsedValues.length > 0 ? parsedValues : [getToday()]);
+      if (!parsedDatetimes) {
+        return;
+      }
       /**
        * If developers incorrectly use multiple="true"
        * with non "date" datetimes, then just select

package/dist/collection/components/modal/modal.js

@@ -217,8 +217,8 @@ export class Modal {
      */
     this.currentBreakpoint = this.initialBreakpoint;
     const { inline, delegate } = this.getDelegate(true);
-    this.ionMount.emit();
     this.usersElement = await attachComponent(delegate, el, this.component, ['ion-page'], this.componentProps, inline);
+    this.ionMount.emit();
     /**
      * When using the lazy loaded build of Stencil, we need to wait
      * for every Stencil component instance to be ready before presenting