diff --git a/packages/x-date-pickers/src/TimeClock/Clock.tsx b/packages/x-date-pickers/src/TimeClock/Clock.tsx index b99356c53365c..b13ae9d11ddc3 100644 --- a/packages/x-date-pickers/src/TimeClock/Clock.tsx +++ b/packages/x-date-pickers/src/TimeClock/Clock.tsx @@ -397,12 +397,7 @@ export function Clock(inProps: ClockProps) { aria-activedescendant={selectedId} aria-label={translations.clockLabelText( type, - value == null - ? null - : utils.format( - value, - utils.is12HourCycleInCurrentLocale() ? 'fullTime12h' : 'fullTime24h', - ), + value == null ? null : utils.format(value, ampm ? 'fullTime12h' : 'fullTime24h'), )} ref={listboxRef} role="listbox" diff --git a/packages/x-date-pickers/src/managers/useTimeManager.ts b/packages/x-date-pickers/src/managers/useTimeManager.ts index 89061323c7044..e54849bb7cd95 100644 --- a/packages/x-date-pickers/src/managers/useTimeManager.ts +++ b/packages/x-date-pickers/src/managers/useTimeManager.ts @@ -20,7 +20,7 @@ import { PickerValue } from '../internals/models'; export function useTimeManager( parameters: UseTimeManagerParameters = {}, ): UseTimeManagerReturnValue { - const { enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure } = + const { enableAccessibleFieldDOMStructure = true as TEnableAccessibleFieldDOMStructure, ampm } = parameters; return React.useMemo( @@ -36,15 +36,12 @@ export function useTimeManager { const formattedValue = utils.isValid(value) - ? utils.format( - value, - utils.is12HourCycleInCurrentLocale() ? 'fullTime12h' : 'fullTime24h', - ) + ? utils.format(value, ampm ? 'fullTime12h' : 'fullTime24h') : null; return localeText.openTimePickerDialogue(formattedValue); }, }), - [enableAccessibleFieldDOMStructure], + [ampm, enableAccessibleFieldDOMStructure], ); } @@ -66,7 +63,8 @@ export function getTimeFieldInternalPropsDefaults( }; } -export interface UseTimeManagerParameters { +export interface UseTimeManagerParameters + extends AmPmProps { enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure; }