diff --git a/packages/calcite-components/src/components/time-picker/time-picker.e2e.ts b/packages/calcite-components/src/components/time-picker/time-picker.e2e.ts index ec6fba99e19..91712f48885 100644 --- a/packages/calcite-components/src/components/time-picker/time-picker.e2e.ts +++ b/packages/calcite-components/src/components/time-picker/time-picker.e2e.ts @@ -58,12 +58,25 @@ describe("calcite-time-picker", () => { describe("defaults", () => { defaults("calcite-time-picker", [ + { propertyName: "hourFormat", defaultValue: "user" }, { propertyName: "scale", defaultValue: "m" }, { propertyName: "step", defaultValue: 60 }, ]); }); describe("focusing", () => { + describe("should focus the first focusable element when setFocus is called (ltr)", () => { + focusable(`calcite-time-picker`, { + shadowFocusTargetSelector: `.${CSS.input}.${CSS.hour}`, + }); + }); + + describe("should focus the first focusable element when setFocus is called (rtl)", () => { + focusable(``, { + shadowFocusTargetSelector: `.${CSS.input}.${CSS.hour}`, + }); + }); + it("should focus input when corresponding nudge up button is clicked", async () => { const page = await newE2EPage(); await page.setContent(``); @@ -161,50 +174,7 @@ describe("calcite-time-picker", () => { expect(await getFocusedElementProp(page, "ariaLabel", { shadow: true })).toEqual(hourElAriaLabel); }); - }); - - describe("should focus the first focusable element when setFocus is called (ltr)", () => { - focusable(`calcite-time-picker`, { - shadowFocusTargetSelector: `.${CSS.input}.${CSS.hour}`, - }); - }); - - describe("should focus the first focusable element when setFocus is called (rtl)", () => { - focusable(``, { - shadowFocusTargetSelector: `.${CSS.input}.${CSS.hour}`, - }); - }); - - it("value displays correctly when value is programmatically changed", async () => { - const originalValue = "11:00:00"; - const newValue = "14:30:40"; - const page = await newE2EPage({ - html: ``, - }); - - const timePicker = await page.find("calcite-time-picker"); - const hourEl = await page.find(`calcite-time-picker >>> .${CSS.hour}`); - const minuteEl = await page.find(`calcite-time-picker >>> .${CSS.minute}`); - const secondEl = await page.find(`calcite-time-picker >>> .${CSS.second}`); - const meridiemEl = await page.find(`calcite-time-picker >>> .${CSS.meridiem}`); - - expect(await timePicker.getProperty("value")).toBe(originalValue); - expect(hourEl.textContent).toBe("11"); - expect(minuteEl.textContent).toBe("00"); - expect(secondEl.textContent).toBe("00"); - expect(meridiemEl.textContent).toBe("AM"); - - timePicker.setProperty("value", newValue); - await page.waitForChanges(); - - expect(await timePicker.getProperty("value")).toBe(newValue); - expect(hourEl.textContent).toBe("02"); - expect(minuteEl.textContent).toBe("30"); - expect(secondEl.textContent).toBe("40"); - expect(meridiemEl.textContent).toBe("PM"); - }); - describe("keyboard accessibility", () => { it("tabbing focuses each input in the correct sequence", async () => { const page = await newE2EPage({ html: ``, @@ -337,80 +307,38 @@ describe("calcite-time-picker", () => { ), ).toBe(true); }); + }); - it("ArrowUp key increments hour property and display hour correctly for fr lang (24-hour)", async () => { - const page = await newE2EPage({ - html: ``, - }); - const hour = await page.find(`calcite-time-picker >>> .${CSS.hour}`); - - await hour.click(); - - for (let i = 1; i < 24; i++) { - await page.keyboard.press("ArrowUp"); - await page.waitForChanges(); - - expect(hour.textContent).toBe(formatTimePart(i)); - } - - await page.keyboard.press("ArrowUp"); - await page.waitForChanges(); - - expect(hour.textContent).toBe("00"); - }); - - it("ArrowDown key decrements hour property and display hour correctly for fr lang (24-hour)", async () => { - const page = await newE2EPage({ - html: ``, - }); - const hour = await page.find(`calcite-time-picker >>> .${CSS.hour}`); - - await hour.click(); - await page.keyboard.press("ArrowDown"); - - for (let i = 23; i > 0; i--) { - await page.keyboard.press("ArrowDown"); - await page.waitForChanges(); - - expect(hour.textContent).toBe(formatTimePart(i)); - } - }); - - it("ArrowUp key increments hour property and display hour correctly for en lang (12-hour)", async () => { - const page = await newE2EPage({ - html: ``, - }); - const hour = await page.find(`calcite-time-picker >>> .${CSS.hour}`); - - await hour.click(); - - for (let i = 1; i < 24; i++) { - await page.keyboard.press("ArrowUp"); - await page.waitForChanges(); - - expect(hour.textContent).toBe(i > 12 ? formatTimePart(i - 12) : formatTimePart(i)); - } - - await page.keyboard.press("ArrowUp"); + it("value displays correctly when value is programmatically changed", async () => { + const originalValue = "11:00:00"; + const newValue = "14:30:40"; + const page = await newE2EPage({ + html: ``, }); - it("ArrowDown key decrements hour property and display hour correctly for en lang (12-hour)", async () => { - const page = await newE2EPage({ - html: ``, - }); - const hour = await page.find(`calcite-time-picker >>> .${CSS.hour}`); + const timePicker = await page.find("calcite-time-picker"); + const hourEl = await page.find(`calcite-time-picker >>> .${CSS.hour}`); + const minuteEl = await page.find(`calcite-time-picker >>> .${CSS.minute}`); + const secondEl = await page.find(`calcite-time-picker >>> .${CSS.second}`); + const meridiemEl = await page.find(`calcite-time-picker >>> .${CSS.meridiem}`); - await hour.click(); - await page.keyboard.press("ArrowDown"); + expect(await timePicker.getProperty("value")).toBe(originalValue); + expect(hourEl.textContent).toBe("11"); + expect(minuteEl.textContent).toBe("00"); + expect(secondEl.textContent).toBe("00"); + expect(meridiemEl.textContent).toBe("AM"); - for (let i = 23; i > 0; i--) { - await page.keyboard.press("ArrowDown"); - await page.waitForChanges(); + timePicker.setProperty("value", newValue); + await page.waitForChanges(); - expect(hour.textContent).toBe(i > 12 ? formatTimePart(i - 12) : formatTimePart(i)); - } - }); + expect(await timePicker.getProperty("value")).toBe(newValue); + expect(hourEl.textContent).toBe("02"); + expect(minuteEl.textContent).toBe("30"); + expect(secondEl.textContent).toBe("40"); + expect(meridiemEl.textContent).toBe("PM"); + }); + describe("keyboard accessibility", () => { it("ArrowUp key increments minute property correctly", async () => { const page = await newE2EPage({ html: ``, @@ -669,7 +597,7 @@ describe("calcite-time-picker", () => { it("restricts typing to valid hour values for 12-hour format", async () => { const page = await newE2EPage({ - html: ``, + html: ``, }); const hour = await page.find(`calcite-time-picker >>> .${CSS.hour}`); @@ -698,7 +626,7 @@ describe("calcite-time-picker", () => { it("restricts typing to valid hour values for 24-hour format", async () => { const page = await newE2EPage({ - html: ``, + html: ``, }); const hour = await page.find(`calcite-time-picker >>> .${CSS.hour}`); @@ -1252,129 +1180,233 @@ describe("calcite-time-picker", () => { describe("l10n", () => { supportedLocales.forEach((locale) => { + if (locale !== "en") { + return; + } const localeHourFormat = getLocaleHourFormat(locale); describe(`${locale} (${localeHourFormat}-hour)`, () => { - it(`uses the locale's preferred setting when hour-format="user"`, async () => { - const initialDelocalizedValue = "14:02:30.001"; - const page = await newE2EPage(); - await page.setContent(html` - - `); - - const meridiemEl = await page.find(`calcite-time-picker >>> .${CSS.meridiem}`); - - if (localeHourFormat === "12") { - expect(meridiemEl).toBeDefined(); - } else { - expect(meridiemEl).toBeNull(); - } + describe(`hour-format="user"`, () => { + it(`displays initial localized value in the locale's preferred hour format`, async () => { + const initialDelocalizedValue = "14:02:30.001"; + const page = await newE2EPage(); + await page.setContent(html` + + `); + + const { + localizedHour: expectedLocalizedHour, + localizedHourSuffix: expectedLocalizedHourSuffix, + localizedMinute: expectedLocalizedMinute, + localizedMinuteSuffix: expectedLocalizedMinuteSuffix, + localizedSecond: expectedLocalizedSecond, + localizedSecondSuffix: expectedLocalizedSecondSuffix, + localizedDecimalSeparator: expectedLocalizedDecimalSeparator, + localizedFractionalSecond: expectedLocalizedFractionalSecond, + localizedMeridiem: expectedLocalizedMeridiem, + } = localizeTimeStringToParts({ + value: initialDelocalizedValue, + locale, + }); + + const hourEl = await page.find(`calcite-time-picker >>> .${CSS.hour}`); + const hourSuffixEl = await page.find(`calcite-time-picker >>> .${CSS.hourSuffix}`); + const minuteEl = await page.find(`calcite-time-picker >>> .${CSS.minute}`); + const minuteSuffixEl = await page.find(`calcite-time-picker >>> .${CSS.minuteSuffix}`); + const secondEl = await page.find(`calcite-time-picker >>> .${CSS.second}`); + const decimalSeparatorEl = await page.find(`calcite-time-picker >>> .${CSS.decimalSeparator}`); + const fractionalSecondEl = await page.find(`calcite-time-picker >>> .${CSS.fractionalSecond}`); + const secondSuffixEl = await page.find(`calcite-time-picker >>> .${CSS.secondSuffix}`); + const meridiemEl = await page.find(`calcite-time-picker >>> .${CSS.meridiem}`); + + expect(hourEl).toEqualText(expectedLocalizedHour); + expect(hourSuffixEl).toEqualText(expectedLocalizedHourSuffix); + expect(minuteEl).toEqualText(expectedLocalizedMinute); + expect(minuteSuffixEl).toEqualText(expectedLocalizedMinuteSuffix); + expect(secondEl).toEqualText(expectedLocalizedSecond); + expect(decimalSeparatorEl).toEqualText(expectedLocalizedDecimalSeparator); + expect(fractionalSecondEl).toEqualText(expectedLocalizedFractionalSecond); + if (secondSuffixEl) { + // Bulgarian is the only locale Calcite supports that has a known suffix after the seconds. + // Esri i18n prefers this character be removed for short time formats, which is the only format currently that time-picker supports. + // We're leaving this conditional check here in case a new locale is added in the future that might need to test the second suffix. + expect(secondSuffixEl).toEqualText(expectedLocalizedSecondSuffix); + } + + if (localeHourFormat === "12") { + expect(meridiemEl).toEqualText(expectedLocalizedMeridiem); + } else { + expect(meridiemEl).toBeNull(); + } + }); }); - it("supports localized 12-hour format", async () => { - const initialDelocalizedValue = "14:02:30.001"; - const page = await newE2EPage(); - await page.setContent(html` - - `); - - const { - localizedHour: expectedLocalizedHour, - localizedHourSuffix: expectedLocalizedHourSuffix, - localizedMinute: expectedLocalizedMinute, - localizedMinuteSuffix: expectedLocalizedMinuteSuffix, - localizedSecond: expectedLocalizedSecond, - localizedSecondSuffix: expectedLocalizedSecondSuffix, - localizedDecimalSeparator: expectedLocalizedDecimalSeparator, - localizedFractionalSecond: expectedLocalizedFractionalSecond, - localizedMeridiem: expectedLocalizedMeridiem, - } = localizeTimeStringToParts({ - hour12: true, - value: initialDelocalizedValue, - locale, + describe(`hour-format="12"`, () => { + it("displays initial localized value correctly", async () => { + const initialDelocalizedValue = "14:02:30.001"; + const page = await newE2EPage(); + await page.setContent(html` + + `); + + const { + localizedHour: expectedLocalizedHour, + localizedHourSuffix: expectedLocalizedHourSuffix, + localizedMinute: expectedLocalizedMinute, + localizedMinuteSuffix: expectedLocalizedMinuteSuffix, + localizedSecond: expectedLocalizedSecond, + localizedSecondSuffix: expectedLocalizedSecondSuffix, + localizedDecimalSeparator: expectedLocalizedDecimalSeparator, + localizedFractionalSecond: expectedLocalizedFractionalSecond, + localizedMeridiem: expectedLocalizedMeridiem, + } = localizeTimeStringToParts({ + hour12: true, + value: initialDelocalizedValue, + locale, + }); + + const hourEl = await page.find(`calcite-time-picker >>> .${CSS.hour}`); + const hourSuffixEl = await page.find(`calcite-time-picker >>> .${CSS.hourSuffix}`); + const minuteEl = await page.find(`calcite-time-picker >>> .${CSS.minute}`); + const minuteSuffixEl = await page.find(`calcite-time-picker >>> .${CSS.minuteSuffix}`); + const secondEl = await page.find(`calcite-time-picker >>> .${CSS.second}`); + const decimalSeparatorEl = await page.find(`calcite-time-picker >>> .${CSS.decimalSeparator}`); + const fractionalSecondEl = await page.find(`calcite-time-picker >>> .${CSS.fractionalSecond}`); + const secondSuffixEl = await page.find(`calcite-time-picker >>> .${CSS.secondSuffix}`); + const meridiemEl = await page.find(`calcite-time-picker >>> .${CSS.meridiem}`); + + expect(hourEl).toEqualText(expectedLocalizedHour); + expect(hourSuffixEl).toEqualText(expectedLocalizedHourSuffix); + expect(minuteEl).toEqualText(expectedLocalizedMinute); + expect(minuteSuffixEl).toEqualText(expectedLocalizedMinuteSuffix); + expect(secondEl).toEqualText(expectedLocalizedSecond); + expect(decimalSeparatorEl).toEqualText(expectedLocalizedDecimalSeparator); + expect(fractionalSecondEl).toEqualText(expectedLocalizedFractionalSecond); + if (secondSuffixEl) { + // Bulgarian is the only locale Calcite supports that has a known suffix after the seconds. + // Esri i18n prefers this character be removed for short time formats, which is the only format currently that time-picker supports. + // We're leaving this conditional check here in case a new locale is added in the future that might need to test the second suffix. + expect(secondSuffixEl).toEqualText(expectedLocalizedSecondSuffix); + } + expect(meridiemEl).toEqualText(expectedLocalizedMeridiem); }); - const hourEl = await page.find(`calcite-time-picker >>> .${CSS.hour}`); - const hourSuffixEl = await page.find(`calcite-time-picker >>> .${CSS.hourSuffix}`); - const minuteEl = await page.find(`calcite-time-picker >>> .${CSS.minute}`); - const minuteSuffixEl = await page.find(`calcite-time-picker >>> .${CSS.minuteSuffix}`); - const secondEl = await page.find(`calcite-time-picker >>> .${CSS.second}`); - const decimalSeparatorEl = await page.find(`calcite-time-picker >>> .${CSS.decimalSeparator}`); - const fractionalSecondEl = await page.find(`calcite-time-picker >>> .${CSS.fractionalSecond}`); - const secondSuffixEl = await page.find(`calcite-time-picker >>> .${CSS.secondSuffix}`); - const meridiemEl = await page.find(`calcite-time-picker >>> .${CSS.meridiem}`); - - expect(hourEl).toEqualText(expectedLocalizedHour); - expect(hourSuffixEl).toEqualText(expectedLocalizedHourSuffix); - expect(minuteEl).toEqualText(expectedLocalizedMinute); - expect(minuteSuffixEl).toEqualText(expectedLocalizedMinuteSuffix); - expect(secondEl).toEqualText(expectedLocalizedSecond); - expect(decimalSeparatorEl).toEqualText(expectedLocalizedDecimalSeparator); - expect(fractionalSecondEl).toEqualText(expectedLocalizedFractionalSecond); - if (secondSuffixEl) { - // Bulgarian is the only locale Calcite supports that has a known suffix after the seconds. - // Esri i18n prefers this character be removed for short time formats, which is the only format currently that time-picker supports. - // We're leaving this conditional check here in case a new locale is added in the future that might need to test the second suffix. - expect(secondSuffixEl).toEqualText(expectedLocalizedSecondSuffix); - } - expect(meridiemEl).toEqualText(expectedLocalizedMeridiem); + it("always displays hour in 12 hour format when nudging and no value is set", async () => { + const page = await newE2EPage({ + html: ``, + }); + const hour = await page.find(`calcite-time-picker >>> .${CSS.hour}`); + + await hour.click(); + + for (let i = 1; i < 24; i++) { + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + + expect(hour).toEqualText(i > 12 ? formatTimePart(i - 12) : formatTimePart(i)); + } + + await page.keyboard.press("Delete"); + await page.waitForChanges(); + await page.keyboard.press("ArrowDown"); + + for (let i = 23; i > 0; i--) { + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + + expect(hour).toEqualText(i > 12 ? formatTimePart(i - 12) : formatTimePart(i)); + } + }); }); - it("supports localized 24-hour format", async () => { - const initialDelocalizedValue = "14:02:30.001"; - const page = await newE2EPage(); - await page.setContent(html` - - `); - - const { - localizedHour: expectedLocalizedHour, - localizedHourSuffix: expectedLocalizedHourSuffix, - localizedMinute: expectedLocalizedMinute, - localizedMinuteSuffix: expectedLocalizedMinuteSuffix, - localizedSecond: expectedLocalizedSecond, - localizedSecondSuffix: expectedLocalizedSecondSuffix, - localizedDecimalSeparator: expectedLocalizedDecimalSeparator, - localizedFractionalSecond: expectedLocalizedFractionalSecond, - } = localizeTimeStringToParts({ - hour12: false, - value: initialDelocalizedValue, - locale, + describe(`hour-format="24"`, () => { + it("displays initial localized value correctly", async () => { + const initialDelocalizedValue = "14:02:30.001"; + const page = await newE2EPage(); + await page.setContent(html` + + `); + + const { + localizedHour: expectedLocalizedHour, + localizedHourSuffix: expectedLocalizedHourSuffix, + localizedMinute: expectedLocalizedMinute, + localizedMinuteSuffix: expectedLocalizedMinuteSuffix, + localizedSecond: expectedLocalizedSecond, + localizedSecondSuffix: expectedLocalizedSecondSuffix, + localizedDecimalSeparator: expectedLocalizedDecimalSeparator, + localizedFractionalSecond: expectedLocalizedFractionalSecond, + } = localizeTimeStringToParts({ + hour12: false, + value: initialDelocalizedValue, + locale, + }); + + const hourEl = await page.find(`calcite-time-picker >>> .${CSS.hour}`); + const hourSuffixEl = await page.find(`calcite-time-picker >>> .${CSS.hourSuffix}`); + const minuteEl = await page.find(`calcite-time-picker >>> .${CSS.minute}`); + const minuteSuffixEl = await page.find(`calcite-time-picker >>> .${CSS.minuteSuffix}`); + const secondEl = await page.find(`calcite-time-picker >>> .${CSS.second}`); + const decimalSeparatorEl = await page.find(`calcite-time-picker >>> .${CSS.decimalSeparator}`); + const fractionalSecondEl = await page.find(`calcite-time-picker >>> .${CSS.fractionalSecond}`); + const secondSuffixEl = await page.find(`calcite-time-picker >>> .${CSS.secondSuffix}`); + const meridiemEl = await page.find(`calcite-time-picker >>> .${CSS.meridiem}`); + + expect(hourEl).toEqualText(expectedLocalizedHour); + expect(hourSuffixEl).toEqualText(expectedLocalizedHourSuffix); + expect(minuteEl).toEqualText(expectedLocalizedMinute); + expect(minuteSuffixEl).toEqualText(expectedLocalizedMinuteSuffix); + expect(secondEl).toEqualText(expectedLocalizedSecond); + expect(decimalSeparatorEl).toEqualText(expectedLocalizedDecimalSeparator); + expect(fractionalSecondEl).toEqualText(expectedLocalizedFractionalSecond); + if (secondSuffixEl) { + // Bulgarian is the only locale Calcite supports that has a known suffix after the seconds. + // Esri i18n prefers this character be removed for short time formats, which is the only format currently that time-picker supports. + // We're leaving this conditional check here in case a new locale is added in the future that might need to test the second suffix. + expect(secondSuffixEl).toEqualText(expectedLocalizedSecondSuffix); + } + expect(meridiemEl).toBeNull(); }); - const hourEl = await page.find(`calcite-time-picker >>> .${CSS.hour}`); - const hourSuffixEl = await page.find(`calcite-time-picker >>> .${CSS.hourSuffix}`); - const minuteEl = await page.find(`calcite-time-picker >>> .${CSS.minute}`); - const minuteSuffixEl = await page.find(`calcite-time-picker >>> .${CSS.minuteSuffix}`); - const secondEl = await page.find(`calcite-time-picker >>> .${CSS.second}`); - const decimalSeparatorEl = await page.find(`calcite-time-picker >>> .${CSS.decimalSeparator}`); - const fractionalSecondEl = await page.find(`calcite-time-picker >>> .${CSS.fractionalSecond}`); - const secondSuffixEl = await page.find(`calcite-time-picker >>> .${CSS.secondSuffix}`); - const meridiemEl = await page.find(`calcite-time-picker >>> .${CSS.meridiem}`); - - expect(hourEl).toEqualText(expectedLocalizedHour); - expect(hourSuffixEl).toEqualText(expectedLocalizedHourSuffix); - expect(minuteEl).toEqualText(expectedLocalizedMinute); - expect(minuteSuffixEl).toEqualText(expectedLocalizedMinuteSuffix); - expect(secondEl).toEqualText(expectedLocalizedSecond); - expect(decimalSeparatorEl).toEqualText(expectedLocalizedDecimalSeparator); - expect(fractionalSecondEl).toEqualText(expectedLocalizedFractionalSecond); - if (secondSuffixEl) { - // Bulgarian is the only locale Calcite supports that has a known suffix after the seconds. - // Esri i18n prefers this character be removed for short time formats, which is the only format currently that time-picker supports. - // We're leaving this conditional check here in case a new locale is added in the future that might need to test the second suffix. - expect(secondSuffixEl).toEqualText(expectedLocalizedSecondSuffix); - } - expect(meridiemEl).toBeNull(); + it("always displays hour in 24 hour format when nudging and no value is set", async () => { + const page = await newE2EPage({ + html: ``, + }); + const hour = await page.find(`calcite-time-picker >>> .${CSS.hour}`); + + await hour.click(); + + for (let i = 1; i < 24; i++) { + await page.keyboard.press("ArrowUp"); + await page.waitForChanges(); + + expect(hour).toEqualText(formatTimePart(i)); + } + + await page.keyboard.press("Delete"); + await page.waitForChanges(); + await page.keyboard.press("ArrowDown"); + + for (let i = 23; i > 0; i--) { + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + + expect(hour).toEqualText(formatTimePart(i)); + } + }); }); }); }); diff --git a/packages/calcite-components/src/components/time-picker/time-picker.tsx b/packages/calcite-components/src/components/time-picker/time-picker.tsx index 910f40fec3d..0861ca6a8e6 100644 --- a/packages/calcite-components/src/components/time-picker/time-picker.tsx +++ b/packages/calcite-components/src/components/time-picker/time-picker.tsx @@ -777,6 +777,7 @@ export class TimePicker extends LitElement implements LoadableComponent { messages: { _lang: locale }, numberingSystem, } = this; + const hour12 = effectiveHourFormat === "12"; if (key === "meridiem") { this.meridiem = value as Meridiem; if (isValidNumber(this.hour)) { @@ -798,6 +799,7 @@ export class TimePicker extends LitElement implements LoadableComponent { part: "hour", locale, numberingSystem, + hour12, }); } } else if (key === "fractionalSecond") { @@ -813,6 +815,7 @@ export class TimePicker extends LitElement implements LoadableComponent { part: "fractionalSecond", locale, numberingSystem, + hour12, }); } else { this[key] = typeof value === "number" ? formatTimePart(value) : value; @@ -821,6 +824,7 @@ export class TimePicker extends LitElement implements LoadableComponent { part: key, locale, numberingSystem, + hour12, }); } let emit = false; @@ -842,7 +846,7 @@ export class TimePicker extends LitElement implements LoadableComponent { this.value = newValue; this.localizedMeridiem = this.value ? localizeTimeStringToParts({ - hour12: effectiveHourFormat === "12", + hour12, locale, numberingSystem, value: this.value, diff --git a/packages/calcite-components/src/utils/time.ts b/packages/calcite-components/src/utils/time.ts index 80c15c012f5..907ceef7fc5 100644 --- a/packages/calcite-components/src/utils/time.ts +++ b/packages/calcite-components/src/utils/time.ts @@ -310,6 +310,7 @@ interface LocalizeTimePartParameters { part: TimePart; locale: SupportedLocale; numberingSystem?: NumberingSystem; + hour12?: boolean; } export function localizeTimePart({ @@ -317,6 +318,7 @@ export function localizeTimePart({ part, locale, numberingSystem = "latn", + hour12, }: LocalizeTimePartParameters): string { if (part === "fractionalSecond") { const localizedDecimalSeparator = getLocalizedDecimalSeparator(locale, numberingSystem); @@ -358,7 +360,7 @@ export function localizeTimePart({ if (!date) { return; } - const formatter = createLocaleDateTimeFormatter({ locale, numberingSystem }); + const formatter = createLocaleDateTimeFormatter({ hour12, locale, numberingSystem }); const parts = formatter.formatToParts(date); return getLocalizedTimePart(part, parts); }