diff --git a/core/src/components/datetime-button/datetime-button.tsx b/core/src/components/datetime-button/datetime-button.tsx
index 7ce3ca4163d..519fb42da6a 100644
--- a/core/src/components/datetime-button/datetime-button.tsx
+++ b/core/src/components/datetime-button/datetime-button.tsx
@@ -8,7 +8,7 @@ import { getIonMode } from '../../global/ionic-global';
import type { Color } from '../../interface';
import type { DatetimePresentation } from '../datetime/datetime-interface';
import { getToday } from '../datetime/utils/data';
-import { getMonthAndYear, getMonthDayAndYear, getLocalizedDateTime, getLocalizedTime } from '../datetime/utils/format';
+import { getLocalizedDateTime, getLocalizedTime } from '../datetime/utils/format';
import { getHourCycle } from '../datetime/utils/helpers';
import { parseDate } from '../datetime/utils/parse';
/**
@@ -196,7 +196,7 @@ export class DatetimeButton implements ComponentInterface {
return;
}
- const { value, locale, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
+ const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
const parsedValues = this.getParsedDateValues(value);
@@ -225,8 +225,12 @@ export class DatetimeButton implements ComponentInterface {
switch (datetimePresentation) {
case 'date-time':
case 'time-date':
- const dateText = getMonthDayAndYear(locale, firstParsedDatetime);
- const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
+ const dateText = getLocalizedDateTime(
+ locale,
+ firstParsedDatetime,
+ formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' }
+ );
+ const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions?.time);
if (preferWheel) {
this.dateText = `${dateText} ${timeText}`;
} else {
@@ -246,20 +250,28 @@ export class DatetimeButton implements ComponentInterface {
}
this.dateText = headerText;
} else {
- this.dateText = getMonthDayAndYear(locale, firstParsedDatetime);
+ this.dateText = getLocalizedDateTime(
+ locale,
+ firstParsedDatetime,
+ formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' }
+ );
}
break;
case 'time':
- this.timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
+ this.timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions?.time);
break;
case 'month-year':
- this.dateText = getMonthAndYear(locale, firstParsedDatetime);
+ this.dateText = getLocalizedDateTime(
+ locale,
+ firstParsedDatetime,
+ formatOptions?.date ?? { month: 'long', year: 'numeric' }
+ );
break;
case 'month':
- this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, { month: 'long' });
+ this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.time ?? { month: 'long' });
break;
case 'year':
- this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, { year: 'numeric' });
+ this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.time ?? { year: 'numeric' });
break;
}
};
diff --git a/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts b/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts
index 938ce976e54..7024527de25 100644
--- a/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts
+++ b/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts
@@ -244,4 +244,87 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await expect(page.locator('#time-button')).not.toBeVisible();
});
});
+
+ test.describe(title('datetime-button: formatOptions'), () => {
+ test('should include date and time for presentation date-time', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+ `,
+ config
+ );
+
+ await page.locator('.datetime-ready').waitFor();
+
+ await expect(page.locator('#date-button')).toContainText('Thu, November 02');
+ await expect(page.locator('#time-button')).toContainText('01:22 AM');
+ });
+
+ test('should include date for presentation date', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+ `,
+ config
+ );
+
+ await page.locator('.datetime-ready').waitFor();
+
+ await expect(page.locator('#date-button')).toContainText('Thu, November 02');
+ });
+
+ test('should include date and time in same button for preferWheel', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+ `,
+ config
+ );
+
+ await page.locator('.datetime-ready').waitFor();
+
+ await expect(page.locator('ion-datetime-button')).toContainText('Thu, November 02 01:22 AM');
+ });
+ });
});
diff --git a/core/src/components/datetime/utils/format.ts b/core/src/components/datetime/utils/format.ts
index 1b498512c64..3d9f491ff0e 100644
--- a/core/src/components/datetime/utils/format.ts
+++ b/core/src/components/datetime/utils/format.ts
@@ -175,16 +175,6 @@ export const getMonthAndYear = (locale: string, refParts: DatetimeParts) => {
return new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric', timeZone: 'UTC' }).format(date);
};
-/**
- * Given a locale and a date object,
- * return a formatted string that includes
- * the short month, numeric day, and full year.
- * Example: Apr 22, 2021
- */
-export const getMonthDayAndYear = (locale: string, refParts: DatetimeParts) => {
- return getLocalizedDateTime(locale, refParts, { month: 'short', day: 'numeric', year: 'numeric' });
-};
-
/**
* Given a locale and a date object,
* return a formatted string that includes
@@ -242,7 +232,7 @@ export const getLocalizedDateTime = (
options: Intl.DateTimeFormatOptions
): string => {
const date = getNormalizedDate(refParts);
- return getDateTimeFormat(locale, options).format(date);
+ return getDateTimeFormat(locale, stripTimeZone(options)).format(date);
};
/**