fix(datetime-button): respect datetime constraints in initial text by droc101 · Pull Request #31218 · ionic-team/ionic-framework

droc101 · 2026-06-15T22:04:51Z

Issue number: resolves #30183

What is the current behavior?

an IonDatetimeButton's default value (such as when .value is undefined) always uses the exact current date & time, regardless of any restrictions requested by the associated IonDatetime (such as only allowing 5 minute increments)

What is the new behavior?

The default display value of an IonDatetimeButton now follows the constraints on its associated IonDatetime
The actual default .value of the IonDatetimeButton is unchanged

Does this introduce a breaking change?

Yes
No

…aints expose new `getClosestDate(date: Date) => Promise<Date>` function in the Datetime class and use it in DatetimeButton to round the current time (default value) into a date that matches the constraints provided on the Datetime element (dayValues, minuteValues, etc.) closes ionic-team#30183

vercel · 2026-06-15T22:04:56Z

@droc101 is attempting to deploy a commit to the Ionic Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2026-06-15T23:08:44Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Jun 25, 2026 3:19pm

thetaPC

Please also add tests to prevent any regressions in the future. I would recommend adding them to datetime-button/test/basic/datetime-button.e2e.ts:

presentation="date" with no constraints — guards the plain day/month fallback (this is the case the current bug breaks).
presentation="time" with minute-values="0" — the originally reported case from #30183.
At least one other constraint, e.g. hour-values or month-values, to confirm it's not minute-specific.

thetaPC · 2026-06-17T22:20:03Z

+      month: date.getMonth(),
+      day: date.getDay(),


DatetimeParts and the native Date API don't use the same conventions, and two fields are mismatched here:

month is off by one. Date.getMonth() is 0-indexed (January is 0), but DatetimeParts.month is 1-indexed (January is 1). So today, June, comes through as month 5, which DatetimeParts reads as May.

day is the wrong field entirely. Date.getDay() returns the day of the week (0–6, Sun–Sat), not the day of the month. The day of the month comes from Date.getDate().

You can reproduce it with a plain no-value date picker (no constraints needed): the calendar lands on Jun 17, 2026 but the button reads "May 3, 2026".

Both of these can be seen with:

<ion-item> <ion-label>Start Date</ion-label> <ion-datetime-button slot="end" datetime="no-value-date"></ion-datetime-button> </ion-item>  <ion-modal keep-contents-mounted="true"> <ion-datetime locale="en-US" presentation="date" id="no-value-date"></ion-datetime> </ion-modal>

Fix:

Suggested change

month: date.getMonth(),

day: date.getDay(),

month: date.getMonth() + 1,

day: date.getDate(),

thetaPC · 2026-06-17T22:34:40Z

+    const defaultDatetime = [(await datetimeEl.getClosestDate(new Date())).toISOString()];
+    const parsedDatetimes = parseDate(parsedValues.length > 0 ? parsedValues : defaultDatetime);


getClosestDate is awaited on every call, but the result is thrown away whenever parsedValues is non-empty (i.e. whenever the datetime has a value). Since getClosestDate is a Stencil @Method, this is an async cross-component round-trip on every ionValueChange, just to discard the result. Move it into the no-value branch and also update the comment:

Suggested change

const defaultDatetime = [(await datetimeEl.getClosestDate(new Date())).toISOString()];

const parsedDatetimes = parseDate(parsedValues.length > 0 ? parsedValues : defaultDatetime);

/**

* Both ion-datetime and ion-datetime-button default to today's date

* and time if no value is set. The datetime is queried for the closest

* valid value so the button respects the same constraints (min, max,

* minuteValues, etc.) that the datetime applies to its own default.

*/

let valuesToParse = parsedValues;

if (valuesToParse.length === 0) {

const closestDate = await datetimeEl.getClosestDate(new Date());

valuesToParse = [closestDate.toISOString()];

}

const parsedDatetimes = parseDate(valuesToParse);

thetaPC · 2026-06-17T22:57:24Z

+  /**
+   * Get the closest valid Date according to the restrictions on this Datetime
+   * @param date The Date to find the closest valid value for
+   */
+  @Method()
+  async getClosestDate(date: Date) {
+    const closest = this.getClosestDatetimeParts({
+      month: date.getMonth(),
+      day: date.getDay(),
+      year: date.getFullYear(),
+      dayOfWeek: date.getDay(),
+      hour: date.getHours(),
+      minute: date.getMinutes(),
+    });
+    return removeDateTzOffset(new Date(convertDataToISO(closest)));
+  }


I'd recommend an @internal method instead of a new public one.

componentWillLoad already computes this.defaultParts (today snapped to the closest valid value via getClosestValidDate, datetime.tsx:1540) — exactly what the button is trying to reconstruct. So the button can just read that value rather than recomputing it from a Date, which also guarantees the button and picker never disagree.

Making it @internal follows how these two already communicate (the button listens to the @internal ionValueChange event), and avoids adding public API to document and support. It also avoids reconstructing parts from a Date (the ISO -> removeDateTzOffset round-trip), which is where the getMonth()/getDay() mistakes lived.

Suggested change

/**

* Get the closest valid Date according to the restrictions on this Datetime

* @param date The Date to find the closest valid value for

*/

@Method()

async getClosestDate(date: Date) {

const closest = this.getClosestDatetimeParts({

month: date.getMonth(),

day: date.getDay(),

year: date.getFullYear(),

dayOfWeek: date.getDay(),

hour: date.getHours(),

minute: date.getMinutes(),

});

return removeDateTzOffset(new Date(convertDataToISO(closest)));

}

/**

* Returns the default parts the datetime falls back to when no value is set:

* today's date and time snapped to the closest value allowed by the

* component's constraints (`min`, `max`, and the `*Values` props).

*

* @internal

*/

@Method()

async getDefaultPart(): Promise<DatetimeParts> {

return this.defaultParts;

}

The datetime-button.tsx then reads it in the no-value branch

/** * Both ion-datetime and ion-datetime-button default to today's date and * time if no value is set. We read the datetime's computed default so the * button respects the same constraints (min, max, minuteValues, etc.) that * the datetime applies to its own fallback, instead of using a raw "now". */ const parsedDatetimes = parsedValues.length > 0 ? parseDate(parsedValues) : [await datetimeEl.getDefaultPart()];

…method returning datetime's defaultParts

droc101 · 2026-06-17T23:24:14Z

Tests will be coming in a separate future commit, have to figure out how that side of the code works.

thetaPC · 2026-06-18T17:24:45Z

@droc101 I highly recommend reviewing the E2E testing doc.

- should default to exact current time with no constraints - should obey minuteValues constraint - should obey hourValues constraint - should obey monthValues constraint

thetaPC · 2026-06-23T21:27:52Z

+   * Get the closest valid DatetimeParts according to the restrictions on this Datetime
+   * @param parts The DatetimeParts to find the closest valid value for
+   */
+  private getClosestDatetimeParts(parts: DatetimeParts) {


This helper can go away. It only exists because the earlier getClosestDate(date) method needed reusable logic, but now that getDefaultPart() just returns the already-computed this.defaultParts, this has a single caller (componentWillLoad). I'd revert it back to how it was originally.

thetaPC · 2026-06-23T21:32:22Z

    this.processMinParts();
    this.processMaxParts();

-    this.defaultParts = getClosestValidDate({


As mentioned in https://github.com/ionic-team/ionic-framework/pull/31218/changes#r3463042864, I would revert this.

thetaPC · 2026-06-23T22:20:32Z

    });
  });
+
+  test.describe(title('datetime-button: datetime constraints'), () => {


Optional / nice-to-have, take it or leave it. These four tests repeat the same clock setup and formatter definitions. We already share per-describe setup with beforeEach elsewhere in this file (see datetime-button.e2e.ts:27 in the "switching to correct view" describe), so we could do the same here. Hoist the constant time and the formatters to the describe scope and set the clock in a beforeEach, then each test only carries its own setContent and expected value:

test.describe(title('datetime-button: datetime constraints'), () => { const fixedTime = new Date('2026-06-18T17:54:54.518Z'); const dateFormat = new Intl.DateTimeFormat('en-US', { weekday: 'short', month: 'long', day: '2-digit', }); const timeFormat = new Intl.DateTimeFormat('en-US', { hour: '2-digit', minute: '2-digit', }); test.beforeEach(async ({ page }) => { await page.clock.setFixedTime(fixedTime); });

Then each test drops its local fixedTime, setFixedTime, and Intl.DateTimeFormat lines and just uses the shared ones. For the expected value, clone before mutating so the shared fixedTime isn't altered between tests:

const expectedTime = new Date(fixedTime); expectedTime.setMinutes(0);.

One caveat if you do take this: once fixedTime is shared across tests, cloning it before mutating becomes necessary (not just tidy), otherwise a mutation in one test leaks into the others via beforeEach.

thetaPC · 2026-06-23T22:56:49Z

Small nit on the PR title: the fix(...) prefix already signals this is a fix, so the second "fix" is redundant. Could you reword the description part to just say what changed? Something like: fix(datetime-button): respect datetime constraints in initial text

droc101 · 2026-06-24T16:22:56Z

Thanks for the review! The changes making some things use async/await are there because @Method() seems to require the method to be async. Please let me know if I'm missing some way to omit the async, I will gladly change it.

thetaPC · 2026-06-25T17:32:24Z

+    test('should default to exact current time with no constraints', async ({ page }) => {
+      test.info().annotations.push({


For consistency with the existing annotated tests in this file (the #27797 ones at line 142 use the testInfo parameter), use testInfo here instead of test.info(). Both work, but matching the surrounding file reads cleaner. Add testInfo as the second callback arg and reference it directly:

Suggested change

test('should default to exact current time with no constraints', async ({ page }) => {

test.info().annotations.push({

test('should default to exact current time with no constraints', async ({ page }, testInfo) => {

testInfo.annotations.push({

Same change applies to the other three constraint test.

thetaPC · 2026-06-25T17:45:48Z

+    const hourValues = (this.parsedHourValues = convertToArrayOfNumbers(this.hourValues));
+    const minuteValues = (this.parsedMinuteValues = convertToArrayOfNumbers(this.minuteValues));
+    const monthValues = (this.parsedMonthValues = convertToArrayOfNumbers(this.monthValues));
+    const yearValues = (this.parsedYearValues = convertToArrayOfNumbers(this.yearValues));
+    const dayValues = (this.parsedDayValues = convertToArrayOfNumbers(this.dayValues));


This block was just reordered from main (the convertToArrayOfNumbers lines used to sit above todayParts/processMinParts/processMaxParts). It has no functional effect, so restoring the original order removes this hunk entirely and leaves getDefaultPart as the only change to this file.

…n componentWillLoad

…f other tests

thetaPC

LGTM

droc101 requested a review from a team as a code owner June 15, 2026 22:04

droc101 requested a review from BenOsodrac June 15, 2026 22:04

github-actions Bot added package: core @ionic/core package package: angular @ionic/angular package labels Jun 15, 2026

vercel Bot deployed to Preview June 15, 2026 23:13 View deployment

Merge branch 'ionic-team:main' into main

ba0ebeb

vercel Bot deployed to Preview June 17, 2026 17:49 View deployment

thetaPC requested changes Jun 17, 2026

View reviewed changes

refactor(datetime-button): communicate default datetime via internal …

7d95269

…method returning datetime's defaultParts

github-actions Bot removed the package: angular @ionic/angular package label Jun 17, 2026

fix(datetime-button): fix linter errors (npm run lint.fix)

4824122

vercel Bot deployed to Preview June 18, 2026 17:36 View deployment

test(datetime-button): add tests for datetime constraints

ef4c1cd

- should default to exact current time with no constraints - should obey minuteValues constraint - should obey hourValues constraint - should obey monthValues constraint

vercel Bot deployed to Preview June 18, 2026 18:39 View deployment

Merge branch 'ionic-team:main' into main

41952e6

vercel Bot deployed to Preview June 22, 2026 17:43 View deployment

droc101 requested a review from thetaPC June 22, 2026 18:10

thetaPC requested changes Jun 23, 2026

View reviewed changes

droc101 changed the title ~~fix(datetime-button): fix initial text not obeying datetime constraints~~ fix(datetime-button): respect datetime constraints in initial text Jun 24, 2026

fix(datetime): changes from 6/23/26 review

be319d6

fix(datetime-button): remove async/await from componentOnReady

9d784dd

droc101 requested a review from thetaPC June 25, 2026 17:11

thetaPC requested changes Jun 25, 2026

View reviewed changes

droc101 added 2 commits June 25, 2026 12:54

refactor(datetime): revert ordering of hourValues,minuteValues,etc. i…

05d81cb

…n componentWillLoad

refactor(datetime-button.e2e): use testInfo argument to match style o…

7d6c32f

…f other tests

droc101 requested a review from thetaPC June 25, 2026 18:31

thetaPC approved these changes Jun 25, 2026

View reviewed changes

thetaPC merged commit 044f358 into ionic-team:main Jun 25, 2026
49 of 50 checks passed

		const defaultDatetime = [(await datetimeEl.getClosestDate(new Date())).toISOString()];
		const parsedDatetimes = parseDate(parsedValues.length > 0 ? parsedValues : defaultDatetime);

-    const defaultDatetime = [(await datetimeEl.getClosestDate(new Date())).toISOString()];
-    const parsedDatetimes = parseDate(parsedValues.length > 0 ? parsedValues : defaultDatetime);
+     /**
+     * Both ion-datetime and ion-datetime-button default to today's date
+     * and time if no value is set. The datetime is queried for the closest
+     * valid value so the button respects the same constraints (min, max,
+     * minuteValues, etc.) that the datetime applies to its own default.
+     */
+     let valuesToParse = parsedValues;
+    if (valuesToParse.length === 0) {
+      const closestDate = await datetimeEl.getClosestDate(new Date());
+      valuesToParse = [closestDate.toISOString()];
+    }
+    const parsedDatetimes = parseDate(valuesToParse);

		test('should default to exact current time with no constraints', async ({ page }) => {
		test.info().annotations.push({

Uh oh!

Conversation

droc101 commented Jun 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Uh oh!

vercel Bot commented Jun 15, 2026

Uh oh!

vercel Bot commented Jun 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thetaPC left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

droc101 commented Jun 17, 2026

Uh oh!

thetaPC commented Jun 18, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thetaPC commented Jun 23, 2026

Uh oh!

droc101 commented Jun 24, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thetaPC left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

droc101 commented Jun 15, 2026 •

edited

Loading

vercel Bot commented Jun 15, 2026 •

edited

Loading