From 650eb7241d185604e1664ffe011898b2e9848a97 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Fri, 5 Jul 2024 18:22:54 +0300
Subject: [PATCH] [DateTimeRangePicker] Resolve `format` from given `views`

---
 .../DesktopDateTimeRangePicker.tsx                          | 4 ++++
 .../MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx | 4 ++++
 packages/x-date-pickers/src/internals/index.ts              | 2 +-
 .../x-date-pickers/src/internals/utils/date-time-utils.ts   | 6 +++++-
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx
index 431bed8573b8..d90ff4da876f 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<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,
diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx
index 7ba1632219fb..8586aa9e32cf 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<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
diff --git a/packages/x-date-pickers/src/internals/index.ts b/packages/x-date-pickers/src/internals/index.ts
index 5707f7901c79..d336ee07f1e0 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 0be0869483c4..47688559cf1b 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 = <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;