From e5690151cb3dbc2fcef1356667b1d5974584068f Mon Sep 17 00:00:00 2001
From: Flavien DELANGLE <flaviendelangle@gmail.com>
Date: Tue, 9 Jul 2024 14:12:46 +0200
Subject: [PATCH] [docs] Add the `DateTimeRangePicker` to the "Commonly used
 components" demo (#13775)

---
 .../overview/CommonlyUsedComponents.js        | 19 +++++++++++++++++++
 .../overview/CommonlyUsedComponents.tsx       | 19 +++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/docs/data/date-pickers/overview/CommonlyUsedComponents.js b/docs/data/date-pickers/overview/CommonlyUsedComponents.js
index 762d75e166dad..b1ddcc788f64d 100644
--- a/docs/data/date-pickers/overview/CommonlyUsedComponents.js
+++ b/docs/data/date-pickers/overview/CommonlyUsedComponents.js
@@ -9,6 +9,7 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
 
 const ProSpan = styled('span')({
   display: 'inline-block',
@@ -57,6 +58,7 @@ export default function CommonlyUsedComponents() {
           'TimePicker',
           'DateTimePicker',
           'DateRangePicker',
+          'DateTimeRangePicker',
         ]}
       >
         <DemoItem label={<Label componentName="DatePicker" valueType="date" />}>
@@ -87,6 +89,23 @@ export default function CommonlyUsedComponents() {
             }}
           />
         </DemoItem>
+        <DemoItem
+          label={
+            <Label
+              componentName="DateTimeRangePicker"
+              valueType="date time range"
+              isProOnly
+            />
+          }
+          component="DateTimeRangePicker"
+        >
+          <DateTimeRangePicker
+            localeText={{
+              start: '',
+              end: '',
+            }}
+          />
+        </DemoItem>
       </DemoContainer>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx b/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx
index bb2dd1899ffdf..81fe975bc4773 100644
--- a/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx
+++ b/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx
@@ -9,6 +9,7 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
 
 const ProSpan = styled('span')({
   display: 'inline-block',
@@ -65,6 +66,7 @@ export default function CommonlyUsedComponents() {
           'TimePicker',
           'DateTimePicker',
           'DateRangePicker',
+          'DateTimeRangePicker',
         ]}
       >
         <DemoItem label={<Label componentName="DatePicker" valueType="date" />}>
@@ -95,6 +97,23 @@ export default function CommonlyUsedComponents() {
             }}
           />
         </DemoItem>
+        <DemoItem
+          label={
+            <Label
+              componentName="DateTimeRangePicker"
+              valueType="date time range"
+              isProOnly
+            />
+          }
+          component="DateTimeRangePicker"
+        >
+          <DateTimeRangePicker
+            localeText={{
+              start: '',
+              end: '',
+            }}
+          />
+        </DemoItem>
       </DemoContainer>
     </LocalizationProvider>
   );