fix(DateField): fallback to infer hour cycle from locale (#1859)

Author: huntabyte

.changeset/some-baboons-trade.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix(DateField): fallback to infer hour cycle from locale

packages/bits-ui/src/lib/bits/date-field/date-field.svelte.ts

@@ -47,6 +47,7 @@ import { type Announcer, getAnnouncer } from "$lib/internal/date-time/announcer.
 import {
 	areAllSegmentsFilled,
 	createContent,
+	getDefaultHourCycle,
 	getValueFromSegments,
 	inferGranularity,
 	initSegmentStates,
@@ -128,9 +129,10 @@ const SEGMENT_CONFIGS: Record<
 		min: (root) => (root.hourCycle.current === 12 ? 1 : 0),
 		max: (root) => {
 			if (root.hourCycle.current === 24) return 23;
-			if ("dayPeriod" in root.segmentValues && root.segmentValues.dayPeriod !== null)
-				return 12;
-			return 23;
+			if (root.hourCycle.current === 12) return 12;
+			// if hourCycle is undefined, infer from locale
+			const inferredHourCycle = getDefaultHourCycle(root.locale.current);
+			return inferredHourCycle === 12 ? 12 : 23;
 		},
 		cycle: 1,
 		canBeZero: true,

packages/bits-ui/src/lib/internal/date-time/field/helpers.ts

@@ -96,7 +96,10 @@ function createContentObj(props: CreateContentObjProps) {
 				 * If we're operating in a 12 hour clock and the part is an hour, we handle
 				 * the conversion to 12 hour format with 2 digit hours and leading zeros here.
 				 */
-				if (part === "hour" && "dayPeriod" in segmentValues && props.hourCycle !== 24) {
+				const is12HourMode =
+					props.hourCycle === 12 ||
+					(props.hourCycle === undefined && getDefaultHourCycle(locale) === 12);
+				if (part === "hour" && is12HourMode) {
 					/**
 					 * If the value is over 12, we convert to 12 hour format and add leading
 					 * zeroes if the value is less than 10.

packages/bits-ui/src/lib/internal/date-time/field/time-helpers.ts

@@ -17,6 +17,7 @@ import { styleToString } from "svelte-toolbelt";
 import { useId } from "$lib/internal/use-id.js";
 import { getPlaceholder } from "../placeholders.js";
 import { isZonedDateTime } from "../utils.js";
+import { getDefaultHourCycle } from "./helpers.js";
 
 export function initializeSegmentValues() {
 	const initialParts = EDITABLE_TIME_SEGMENT_PARTS.map((part) => {
@@ -81,7 +82,10 @@ function createTimeContentObj(props: CreateTimeContentObjProps) {
 			 * If we're operating in a 12 hour clock and the part is an hour, we handle
 			 * the conversion to 12 hour format with 2 digit hours and leading zeros here.
 			 */
-			if (part === "hour" && "dayPeriod" in segmentValues && props.hourCycle !== 24) {
+			const is12HourMode =
+				props.hourCycle === 12 ||
+				(props.hourCycle === undefined && getDefaultHourCycle(locale) === 12);
+			if (part === "hour" && is12HourMode) {
 				/**
 				 * If the value is over 12, we convert to 12 hour format and add leading
 				 * zeroes if the value is less than 10.

tests/src/tests/date-picker/date-picker.browser.test.ts

@@ -579,47 +579,30 @@ it("should not close popover when closeOnDateSelect is false", async () => {
 
 describe("date picker - 24-hour format with locales", () => {
 	it("should allow typing hours 0-23 with non en-US locales that use 24-hour format", async () => {
-		if (navigator.userAgent.includes("WebKit")) {
-			expect(true);
-			return;
-		}
-
-		setup({
+		const t = setup({
 			granularity: "minute",
-			locale: "de-DE", // german uses 24-hour format
+			locale: "nl-NL", // dutch uses 24-hour format
 		});
 
-		const { getHour } = getTimeSegments(page.getByTestId);
-		const hour = getHour();
-
-		// should not have dayPeriod for 24-hour locales
-		await expectNotExists(page.getByTestId("dayPeriod"));
-
-		// test typing single digit hours > 2 (issue: these get clamped to 12-hour format)
-		await hour.click();
-		await userEvent.keyboard("3");
-		await expect.element(hour).toHaveTextContent("03");
-
-		// test typing hours 13-23 (issue: these should work but currently clamp)
-		await hour.click();
-		await userEvent.keyboard("15");
-		await expect.element(hour).toHaveTextContent("15");
-
-		await hour.click();
-		await userEvent.keyboard("23");
-		await expect.element(hour).toHaveTextContent("23");
-
-		await hour.click();
-		await userEvent.keyboard("18");
-		await expect.element(hour).toHaveTextContent("18");
+		const { getHour, getMinute } = getTimeSegments(page.getByTestId);
+
+		await t.day.click();
+		await userEvent.keyboard("9");
+
+		await expect.element(t.day).toHaveTextContent("09");
+		await expect.element(t.month).toHaveFocus();
+		await userEvent.keyboard("9");
+		await expect.element(t.month).toHaveTextContent("09");
+		await expect.element(t.year).toHaveFocus();
+		await userEvent.keyboard("1234");
+		await expect.element(t.year).toHaveTextContent("1234");
+		await expect.element(getHour()).toHaveFocus();
+		await userEvent.keyboard("22");
+		await expect.element(getHour()).toHaveTextContent("22");
+		await expect.element(getMinute()).toHaveFocus();
 	});
 
 	it("should allow arrow key navigation through full 0-23 range with 24-hour locales", async () => {
-		if (navigator.userAgent.includes("WebKit")) {
-			expect(true);
-			return;
-		}
-
 		const value = new CalendarDateTime(2023, 10, 12, 14, 30, 30, 0);
 		setup({
 			value,
@@ -653,11 +636,6 @@ describe("date picker - 24-hour format with locales", () => {
 	});
 
 	it("should display and allow typing hours > 12 with sv-SE locale (24-hour format)", async () => {
-		if (navigator.userAgent.includes("WebKit")) {
-			expect(true);
-			return;
-		}
-
 		const value = new CalendarDateTime(2023, 10, 12, 18, 30, 30, 0);
 		setup({
 			value,
@@ -686,11 +664,6 @@ describe("date picker - 24-hour format with locales", () => {
 	});
 
 	it("should handle ja-JP locale (24-hour format) correctly", async () => {
-		if (navigator.userAgent.includes("WebKit")) {
-			expect(true);
-			return;
-		}
-
 		const value = new CalendarDateTime(2023, 10, 12, 16, 30, 0, 0);
 		setup({
 			value,