diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx index 431bed8573b85..d90ff4da876f3 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx @@ -7,6 +7,8 @@ import { isInternalTimeView, PickerViewRenderer, PickerViewsRendererProps, + resolveDateTimeFormat, + useUtils, } from '@mui/x-date-pickers/internals'; import { PickerValidDate } from '@mui/x-date-pickers/models'; import { resolveComponentProps } from '@mui/base/utils'; @@ -138,6 +140,7 @@ const DesktopDateTimeRangePicker = React.forwardRef(function DesktopDateTimeRang inProps: DesktopDateTimeRangePickerProps, ref: React.Ref, ) { + const utils = useUtils(); // Props with the default values common to all date time range pickers const defaultizedProps = useDateTimeRangePickerDefaultizedProps< TDate, @@ -170,6 +173,7 @@ const DesktopDateTimeRangePicker = React.forwardRef(function DesktopDateTimeRang ...defaultizedProps, views, viewRenderers, + format: resolveDateTimeFormat(utils, defaultizedProps), // force true to correctly handle `renderTimeViewClock` as a renderer ampmInClock: true, calendars: defaultizedProps.calendars ?? 1, diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx index 7ba1632219fb2..8586aa9e32cf8 100644 --- a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx @@ -11,6 +11,8 @@ import { DefaultizedProps, PickerViewsRendererProps, TimeViewWithMeridiem, + resolveDateTimeFormat, + useUtils, } from '@mui/x-date-pickers/internals'; import { PickerValidDate } from '@mui/x-date-pickers/models'; import { resolveComponentProps } from '@mui/base/utils'; @@ -147,6 +149,7 @@ const MobileDateTimeRangePicker = React.forwardRef(function MobileDateTimeRangeP inProps: MobileDateTimeRangePickerProps, ref: React.Ref, ) { + const utils = useUtils(); // Props with the default values common to all date time range pickers const defaultizedProps = useDateTimeRangePickerDefaultizedProps< TDate, @@ -169,6 +172,7 @@ const MobileDateTimeRangePicker = React.forwardRef(function MobileDateTimeRangeP const props = { ...defaultizedProps, viewRenderers, + format: resolveDateTimeFormat(utils, defaultizedProps), // Force one calendar on mobile to avoid layout issues calendars: 1, // force true to correctly handle `renderTimeViewClock` as a renderer diff --git a/packages/x-date-pickers/src/internals/index.ts b/packages/x-date-pickers/src/internals/index.ts index 5707f7901c790..d336ee07f1e07 100644 --- a/packages/x-date-pickers/src/internals/index.ts +++ b/packages/x-date-pickers/src/internals/index.ts @@ -131,7 +131,7 @@ export { mergeDateAndTime, formatMeridiem, } from './utils/date-utils'; -export { resolveTimeViewsResponse } from './utils/date-time-utils'; +export { resolveTimeViewsResponse, resolveDateTimeFormat } from './utils/date-time-utils'; export { splitFieldInternalAndForwardedProps } from './utils/fields'; export { getDefaultReferenceDate } from './utils/getDefaultReferenceDate'; export { diff --git a/packages/x-date-pickers/src/internals/utils/date-time-utils.ts b/packages/x-date-pickers/src/internals/utils/date-time-utils.ts index 0be0869483c4b..47688559cf1b2 100644 --- a/packages/x-date-pickers/src/internals/utils/date-time-utils.ts +++ b/packages/x-date-pickers/src/internals/utils/date-time-utils.ts @@ -14,7 +14,11 @@ import { DefaultizedProps } from '../models/helpers'; export const resolveDateTimeFormat = ( utils: MuiPickersAdapter, - { views, format, ...other }: { format?: string; views: readonly DateOrTimeView[]; ampm: boolean }, + { + views, + format, + ...other + }: { format?: string; views: readonly DateOrTimeViewWithMeridiem[]; ampm: boolean }, ) => { if (format) { return format;