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();
};
/**