[DateTimeRangePicker] Resolve format from given views (mui#13743)

Author: LukasTy

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<TDate, TEnableAccessibleFieldDOMStructure>,
   ref: React.Ref<HTMLDivElement>,
 ) {
+  const utils = useUtils<TDate>();
   // 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,

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<TDate, TEnableAccessibleFieldDOMStructure>,
   ref: React.Ref<HTMLDivElement>,
 ) {
+  const utils = useUtils<TDate>();
   // 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

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 {

packages/x-date-pickers/src/internals/utils/date-time-utils.ts

@@ -14,7 +14,11 @@ import { DefaultizedProps } from '../models/helpers';
 
 export const resolveDateTimeFormat = <TDate extends PickerValidDate>(
   utils: MuiPickersAdapter<TDate>,
-  { views, format, ...other }: { format?: string; views: readonly DateOrTimeView[]; ampm: boolean },
+  {
+    views,
+    format,
+    ...other
+  }: { format?: string; views: readonly DateOrTimeViewWithMeridiem[]; ampm: boolean },
 ) => {
   if (format) {
     return format;