diff --git a/core/src/components/datetime/test/data.spec.ts b/core/src/components/datetime/test/data.spec.ts index 73420d2f6a7..ece8444ae57 100644 --- a/core/src/components/datetime/test/data.spec.ts +++ b/core/src/components/datetime/test/data.spec.ts @@ -63,7 +63,7 @@ describe('generateTime()', () => { }; const { hours, minutes } = generateTime(today, 'h12', min); - expect(hours.length).toEqual(11); + expect(hours.length).toEqual(10); expect(minutes.length).toEqual(60); }); it('should not filter according to min if not on reference day', () => { @@ -103,7 +103,7 @@ describe('generateTime()', () => { }; const { hours, minutes } = generateTime(today, 'h12', undefined, max); - expect(hours.length).toEqual(7); + expect(hours.length).toEqual(8); expect(minutes.length).toEqual(45); }); it('should not filter according to min if not on reference day', () => { diff --git a/core/src/components/datetime/test/format.spec.ts b/core/src/components/datetime/test/format.spec.ts index a79411c349d..74e81bf8900 100644 --- a/core/src/components/datetime/test/format.spec.ts +++ b/core/src/components/datetime/test/format.spec.ts @@ -57,7 +57,7 @@ describe('getMonthAndDay()', () => { describe('getFormattedHour()', () => { it('should only add padding if using 24 hour time', () => { expect(getFormattedHour(0, true)).toEqual('00'); - expect(getFormattedHour(0, false)).toEqual('0'); + expect(getFormattedHour(0, false)).toEqual('12'); expect(getFormattedHour(10, true)).toEqual('10'); expect(getFormattedHour(10, false)).toEqual('10'); diff --git a/core/src/components/datetime/test/minmax/datetime.e2e.ts b/core/src/components/datetime/test/minmax/datetime.e2e.ts index 1d4a567994d..7cc7207a19a 100644 --- a/core/src/components/datetime/test/minmax/datetime.e2e.ts +++ b/core/src/components/datetime/test/minmax/datetime.e2e.ts @@ -188,4 +188,50 @@ test.describe('datetime: minmax', () => { await expect(datetimeMonthDidChange).toHaveReceivedEventTimes(1); }); + + test('should not include 12AM when minimum is greater than 12AM', async ({ page, skip }) => { + skip.rtl(); + + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/25183', + }); + + await page.setContent(` + + `); + + const hourPickerItems = page.locator( + 'ion-datetime ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)' + ); + await expect(hourPickerItems).toHaveText(['8', '9', '10', '11']); + }); + + test('should include 12PM when minimum is greater than 12', async ({ page, skip }) => { + skip.rtl(); + + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/25183', + }); + + await page.setContent(` + + `); + + const hourPickerItems = page.locator( + 'ion-datetime ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)' + ); + await expect(hourPickerItems).toHaveText(['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']); + }); }); diff --git a/core/src/components/datetime/utils/data.ts b/core/src/components/datetime/utils/data.ts index 1f8c134f034..c8020ba9d0b 100644 --- a/core/src/components/datetime/utils/data.ts +++ b/core/src/components/datetime/utils/data.ts @@ -44,7 +44,7 @@ const minutes = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, ]; -const hour12 = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; +const hour12 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; const hour23 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]; /** diff --git a/core/src/components/datetime/utils/format.ts b/core/src/components/datetime/utils/format.ts index beddc2319f8..0351ae75598 100644 --- a/core/src/components/datetime/utils/format.ts +++ b/core/src/components/datetime/utils/format.ts @@ -49,16 +49,26 @@ export const addTimePadding = (value: number): string => { }; /** - * Formats the hour value so that it - * is always 2 digits. Only applies - * if using 12 hour format. + * Formats 24 hour times so that + * it always has 2 digits. For + * 12 hour times it ensures that + * hour 0 is formatted as '12'. */ export const getFormattedHour = (hour: number, use24Hour: boolean): string => { - if (!use24Hour) { - return hour.toString(); + if (use24Hour) { + return addTimePadding(hour); } - return addTimePadding(hour); + /** + * If using 12 hour + * format, make sure hour + * 0 is formatted as '12'. + */ + if (hour === 0) { + return '12'; + } + + return hour.toString(); }; /**