fix(useDateFormatter): respect hourCycle over locale for dayPeriod (#1932)

kricsleo · web-flow · commit 030742758a96 · 2025-05-27T20:34:25.000+08:00
diff --git a/packages/core/src/DateField/DateFieldRoot.vue b/packages/core/src/DateField/DateFieldRoot.vue
@@ -1,6 +1,5 @@
 <script lang="ts">
 import type { DateValue } from '@internationalized/date'
-
 import type { Ref } from 'vue'
 import type { Matcher } from '@/date'
 import type { PrimitiveProps } from '@/Primitive'
@@ -16,6 +15,7 @@ import {
   initializeSegmentValues,
   isSegmentNavigationKey,
   normalizeDateStep,
+  normalizeHourCycle,
   syncSegmentValues,
 } from '@/shared/date'
 
@@ -116,7 +116,9 @@ const { disabled, readonly, isDateUnavailable: propsIsDateUnavailable, granulari
 const locale = useLocale(propLocale)
 const dir = useDirection(propDir)
 
-const formatter = useDateFormatter(locale.value)
+const formatter = useDateFormatter(locale.value, {
+  hourCycle: normalizeHourCycle(props.hourCycle),
+})
 const { primitiveElement, currentElement: parentElement }
   = usePrimitiveElement()
 const segmentElements = ref<Set<HTMLElement>>(new Set())
diff --git a/packages/core/src/DateRangeField/DateRangeFieldRoot.vue b/packages/core/src/DateRangeField/DateRangeFieldRoot.vue
@@ -24,6 +24,7 @@ import {
   initializeSegmentValues,
   isSegmentNavigationKey,
   normalizeDateStep,
+  normalizeHourCycle,
 
   syncSegmentValues,
 } from '@/shared/date'
@@ -117,7 +118,9 @@ const { disabled, readonly, isDateUnavailable: propsIsDateUnavailable, dir: prop
 const locale = useLocale(propLocale)
 const dir = useDirection(propDir)
 
-const formatter = useDateFormatter(locale.value)
+const formatter = useDateFormatter(locale.value, {
+  hourCycle: normalizeHourCycle(props.hourCycle),
+})
 const { primitiveElement, currentElement: parentElement }
   = usePrimitiveElement()
 const segmentElements = ref<Set<HTMLElement>>(new Set())
diff --git a/packages/core/src/TimeField/TimeFieldRoot.vue b/packages/core/src/TimeField/TimeFieldRoot.vue
@@ -16,6 +16,7 @@ import {
   initializeTimeSegmentValues,
   isSegmentNavigationKey,
   normalizeDateStep,
+  normalizeHourCycle,
 
   syncTimeSegmentValues,
 
@@ -123,7 +124,9 @@ const { disabled, readonly, granularity, defaultValue, minValue, maxValue, dir:
 const locale = useLocale(propLocale)
 const dir = useDirection(propDir)
 
-const formatter = useDateFormatter(locale.value)
+const formatter = useDateFormatter(locale.value, {
+  hourCycle: normalizeHourCycle(props.hourCycle),
+})
 const { primitiveElement, currentElement: parentElement }
   = usePrimitiveElement()
 const segmentElements = ref<Set<HTMLElement>>(new Set())
diff --git a/packages/core/src/shared/date/parser.ts b/packages/core/src/shared/date/parser.ts
@@ -3,7 +3,7 @@ import type { Ref } from 'vue'
 import type { Formatter } from '@/shared'
 import type { DateSegmentPart, Granularity, HourCycle, SegmentContentObj, SegmentPart, SegmentValueObj, TimeSegmentPart } from '@/shared/date'
 import { isZonedDateTime, toDate } from '@/date'
-import { DATE_SEGMENT_PARTS, EDITABLE_SEGMENT_PARTS, getOptsByGranularity, getPlaceholder, isDateSegmentPart, isSegmentPart, TIME_SEGMENT_PARTS } from '@/shared/date'
+import { DATE_SEGMENT_PARTS, EDITABLE_SEGMENT_PARTS, getOptsByGranularity, getPlaceholder, isDateSegmentPart, isSegmentPart, normalizeHourCycle, TIME_SEGMENT_PARTS } from '@/shared/date'
 
 const calendarDateTimeGranularities = ['hour', 'minute', 'second']
 
@@ -116,10 +116,10 @@ function createContentObj(props: CreateContentObjProps) {
              *   so that user can input any possible day.
              */
             month: segmentValues.month ?? 1,
-          }), part, { hourCycle: props.hourCycle === 24 ? 'h23' : undefined })
+          }), part, { hourCycle: normalizeHourCycle(props.hourCycle) })
         }
         return formatter.part(props.dateRef.set({ [part]: value }), part, {
-          hourCycle: props.hourCycle === 24 ? 'h23' : undefined,
+          hourCycle: normalizeHourCycle(props.hourCycle),
         })
       }
       else {
diff --git a/packages/core/src/shared/date/utils.ts b/packages/core/src/shared/date/utils.ts
@@ -11,8 +11,8 @@ export function getOptsByGranularity(granularity: Granularity, hourCycle: HourCy
     minute: '2-digit',
     second: '2-digit',
     timeZoneName: 'short',
-    hourCycle: hourCycle === 24 ? 'h23' : undefined,
-    hour12: hourCycle === 24 ? false : undefined,
+    hourCycle: normalizeHourCycle(hourCycle),
+    hour12: normalizeHour12(hourCycle),
   }
   if (isTimeValue) {
     delete opts.year
@@ -66,3 +66,19 @@ export function handleCalendarInitialFocus(calendar: HTMLElement) {
   if (firstDay)
     return firstDay.focus()
 }
+
+export function normalizeHourCycle(hourCycle: HourCycle) {
+  if (hourCycle === 24)
+    return 'h23'
+  if (hourCycle === 12)
+    return 'h11'
+  return undefined
+}
+
+export function normalizeHour12(hourCycle: HourCycle) {
+  if (hourCycle === 24)
+    return false
+  if (hourCycle === 12)
+    return true
+  return undefined
+}
diff --git a/packages/core/src/shared/useDateFormatter.ts b/packages/core/src/shared/useDateFormatter.ts
@@ -34,7 +34,7 @@ export type Formatter = {
  *
  * @see [DateFormatter](https://react-spectrum.adobe.com/internationalized/date/DateFormatter.html)
  */
-export function useDateFormatter(initialLocale: string): Formatter {
+export function useDateFormatter(initialLocale: string, opts: DateFormatterOptions = {}): Formatter {
   const locale = ref(initialLocale)
 
   function getLocale() {
@@ -46,7 +46,7 @@ export function useDateFormatter(initialLocale: string): Formatter {
   }
 
   function custom(date: Date, options: DateFormatterOptions) {
-    return new DateFormatter(locale.value, options).format(date)
+    return new DateFormatter(locale.value, { ...opts, ...options }).format(date)
   }
 
   function selectedDate(date: DateValue, includeTime = true) {
@@ -64,11 +64,11 @@ export function useDateFormatter(initialLocale: string): Formatter {
   }
 
   function fullMonthAndYear(date: Date, options: DateFormatterOptions = {}) {
-    return new DateFormatter(locale.value, { month: 'long', year: 'numeric', ...options }).format(date)
+    return new DateFormatter(locale.value, { ...opts, month: 'long', year: 'numeric', ...options }).format(date)
   }
 
   function fullMonth(date: Date, options: DateFormatterOptions = {}) {
-    return new DateFormatter(locale.value, { month: 'long', ...options }).format(date)
+    return new DateFormatter(locale.value, { ...opts, month: 'long', ...options }).format(date)
   }
 
   function getMonths() {
@@ -78,27 +78,29 @@ export function useDateFormatter(initialLocale: string): Formatter {
   }
 
   function fullYear(date: Date, options: DateFormatterOptions = {}) {
-    return new DateFormatter(locale.value, { year: 'numeric', ...options }).format(date)
+    return new DateFormatter(locale.value, { ...opts, year: 'numeric', ...options }).format(date)
   }
 
   function toParts(date: DateValue, options?: DateFormatterOptions) {
     if (isZonedDateTime(date)) {
       return new DateFormatter(locale.value, {
+        ...opts,
         ...options,
         timeZone: (date as ZonedDateTime).timeZone,
       }).formatToParts(toDate(date))
     }
     else {
-      return new DateFormatter(locale.value, options).formatToParts(toDate(date))
+      return new DateFormatter(locale.value, { ...opts, ...options }).formatToParts(toDate(date))
     }
   }
 
   function dayOfWeek(date: Date, length: DateFormatterOptions['weekday'] = 'narrow') {
-    return new DateFormatter(locale.value, { weekday: length }).format(date)
+    return new DateFormatter(locale.value, { ...opts, weekday: length }).format(date)
   }
 
   function dayPeriod(date: Date) {
     const parts = new DateFormatter(locale.value, {
+      ...opts,
       hour: 'numeric',
       minute: 'numeric',
     }).formatToParts(date)

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ export type Formatter = {`
`34`	`34`	`*`
`35`	`35`	`* @see [DateFormatter](https://react-spectrum.adobe.com/internationalized/date/DateFormatter.html)`
`36`	`36`	`*/`
`37`		`-export function useDateFormatter(initialLocale: string): Formatter {`
	`37`	`+export function useDateFormatter(initialLocale: string, opts: DateFormatterOptions = {}): Formatter {`
`38`	`38`	`const locale = ref(initialLocale)`
`39`	`39`
`40`	`40`	`function getLocale() {`
`@@ -46,7 +46,7 @@ export function useDateFormatter(initialLocale: string): Formatter {`
`46`	`46`	`}`
`47`	`47`
`48`	`48`	`function custom(date: Date, options: DateFormatterOptions) {`
`49`		`- return new DateFormatter(locale.value, options).format(date)`
	`49`	`+ return new DateFormatter(locale.value, { ...opts, ...options }).format(date)`
`50`	`50`	`}`
`51`	`51`
`52`	`52`	`function selectedDate(date: DateValue, includeTime = true) {`
`@@ -64,11 +64,11 @@ export function useDateFormatter(initialLocale: string): Formatter {`
`64`	`64`	`}`
`65`	`65`
`66`	`66`	`function fullMonthAndYear(date: Date, options: DateFormatterOptions = {}) {`
`67`		`- return new DateFormatter(locale.value, { month: 'long', year: 'numeric', ...options }).format(date)`
	`67`	`+ return new DateFormatter(locale.value, { ...opts, month: 'long', year: 'numeric', ...options }).format(date)`
`68`	`68`	`}`
`69`	`69`
`70`	`70`	`function fullMonth(date: Date, options: DateFormatterOptions = {}) {`
`71`		`- return new DateFormatter(locale.value, { month: 'long', ...options }).format(date)`
	`71`	`+ return new DateFormatter(locale.value, { ...opts, month: 'long', ...options }).format(date)`
`72`	`72`	`}`
`73`	`73`
`74`	`74`	`function getMonths() {`
`@@ -78,27 +78,29 @@ export function useDateFormatter(initialLocale: string): Formatter {`
`78`	`78`	`}`
`79`	`79`
`80`	`80`	`function fullYear(date: Date, options: DateFormatterOptions = {}) {`
`81`		`- return new DateFormatter(locale.value, { year: 'numeric', ...options }).format(date)`
	`81`	`+ return new DateFormatter(locale.value, { ...opts, year: 'numeric', ...options }).format(date)`
`82`	`82`	`}`
`83`	`83`
`84`	`84`	`function toParts(date: DateValue, options?: DateFormatterOptions) {`
`85`	`85`	`if (isZonedDateTime(date)) {`
`86`	`86`	`return new DateFormatter(locale.value, {`
	`87`	`+ ...opts,`
`87`	`88`	`...options,`
`88`	`89`	`timeZone: (date as ZonedDateTime).timeZone,`
`89`	`90`	`}).formatToParts(toDate(date))`
`90`	`91`	`}`
`91`	`92`	`else {`
`92`		`- return new DateFormatter(locale.value, options).formatToParts(toDate(date))`
	`93`	`+ return new DateFormatter(locale.value, { ...opts, ...options }).formatToParts(toDate(date))`
`93`	`94`	`}`
`94`	`95`	`}`
`95`	`96`
`96`	`97`	`function dayOfWeek(date: Date, length: DateFormatterOptions['weekday'] = 'narrow') {`
`97`		`- return new DateFormatter(locale.value, { weekday: length }).format(date)`
	`98`	`+ return new DateFormatter(locale.value, { ...opts, weekday: length }).format(date)`
`98`	`99`	`}`
`99`	`100`
`100`	`101`	`function dayPeriod(date: Date) {`
`101`	`102`	`const parts = new DateFormatter(locale.value, {`
	`103`	`+ ...opts,`
`102`	`104`	`hour: 'numeric',`
`103`	`105`	`minute: 'numeric',`
`104`	`106`	`}).formatToParts(date)`