[docs] Include DateTimeRangePicker in relevant demos (#11815)

mui · Jan 25, 2024 · 702ebeb · 702ebeb
1 parent e1a0e3f
commit 702ebeb
Show file tree

Hide file tree

Showing 40 changed files with 305 additions and 59 deletions.
diff --git a/docs/data/date-pickers/base-concepts/ComponentExplorerNoSnap.js b/docs/data/date-pickers/base-concepts/ComponentExplorerNoSnap.js
@@ -70,7 +70,11 @@ const COMPONENTS = {
   dateTimeRange: {
     field: ['SingleInputDateTimeRangeField', 'MultiInputDateTimeRangeField'],
     view: [],
-    picker: [],
+    picker: [
+      'DateTimeRangePicker',
+      'DesktopDateTimeRangePicker',
+      'MobileDateTimeRangePicker',
+    ],
   },
 };
 

diff --git a/docs/data/date-pickers/base-concepts/ComponentExplorerNoSnap.tsx b/docs/data/date-pickers/base-concepts/ComponentExplorerNoSnap.tsx
@@ -87,7 +87,11 @@ const COMPONENTS: Record<
   dateTimeRange: {
     field: ['SingleInputDateTimeRangeField', 'MultiInputDateTimeRangeField'],
     view: [],
-    picker: [],
+    picker: [
+      'DateTimeRangePicker',
+      'DesktopDateTimeRangePicker',
+      'MobileDateTimeRangePicker',
+    ],
   },
 };
 

diff --git a/docs/data/date-pickers/validation/DateRangeValidationShouldDisableDate.js b/docs/data/date-pickers/validation/DateRangeValidationShouldDisableDate.js
@@ -1,8 +1,10 @@
 import * as React from 'react';
 import dayjs from 'dayjs';
+import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
 
 const lastSunday = dayjs().startOf('week').subtract(1, 'day');
 const nextSunday = dayjs().endOf('week').startOf('day');
@@ -16,16 +18,32 @@ const isWeekend = (date) => {
 export default function DateRangeValidationShouldDisableDate() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DateRangePicker
-        defaultValue={[lastSunday, nextSunday]}
-        shouldDisableDate={(date, position) => {
-          if (position === 'end') {
-            return false;
-          }
+      <DemoContainer components={['DateRangePicker', 'DateTimeRangePicker']}>
+        <DemoItem label="DateRangePicker" component="DateRangePicker">
+          <DateRangePicker
+            defaultValue={[lastSunday, nextSunday]}
+            shouldDisableDate={(date, position) => {
+              if (position === 'end') {
+                return false;
+              }
 
-          return isWeekend(date);
-        }}
-      />
+              return isWeekend(date);
+            }}
+          />
+        </DemoItem>
+        <DemoItem label="DateTimeRangePicker" component="DateTimeRangePicker">
+          <DateTimeRangePicker
+            defaultValue={[lastSunday, nextSunday]}
+            shouldDisableDate={(date, position) => {
+              if (position === 'end') {
+                return false;
+              }
+
+              return isWeekend(date);
+            }}
+          />
+        </DemoItem>
+      </DemoContainer>
     </LocalizationProvider>
   );
 }
diff --git a/docs/data/date-pickers/validation/DateRangeValidationShouldDisableDate.tsx b/docs/data/date-pickers/validation/DateRangeValidationShouldDisableDate.tsx
@@ -1,8 +1,10 @@
 import * as React from 'react';
 import dayjs, { Dayjs } from 'dayjs';
+import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
 
 const lastSunday = dayjs().startOf('week').subtract(1, 'day');
 const nextSunday = dayjs().endOf('week').startOf('day');
@@ -16,16 +18,32 @@ const isWeekend = (date: Dayjs) => {
 export default function DateRangeValidationShouldDisableDate() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DateRangePicker
-        defaultValue={[lastSunday, nextSunday]}
-        shouldDisableDate={(date, position) => {
-          if (position === 'end') {
-            return false;
-          }
+      <DemoContainer components={['DateRangePicker', 'DateTimeRangePicker']}>
+        <DemoItem label="DateRangePicker" component="DateRangePicker">
+          <DateRangePicker
+            defaultValue={[lastSunday, nextSunday]}
+            shouldDisableDate={(date, position) => {
+              if (position === 'end') {
+                return false;
+              }
 
-          return isWeekend(date);
-        }}
-      />
+              return isWeekend(date);
+            }}
+          />
+        </DemoItem>
+        <DemoItem label="DateTimeRangePicker" component="DateTimeRangePicker">
+          <DateTimeRangePicker
+            defaultValue={[lastSunday, nextSunday]}
+            shouldDisableDate={(date, position) => {
+              if (position === 'end') {
+                return false;
+              }
+
+              return isWeekend(date);
+            }}
+          />
+        </DemoItem>
+      </DemoContainer>
     </LocalizationProvider>
   );
 }
diff --git a/docs/data/date-pickers/validation/DateRangeValidationShouldDisableDate.tsx.preview b/docs/data/date-pickers/validation/DateRangeValidationShouldDisableDate.tsx.preview
diff --git a/docs/data/date-pickers/validation/DateTimeValidationMaxDateTime.js b/docs/data/date-pickers/validation/DateTimeValidationMaxDateTime.js
@@ -4,17 +4,24 @@ import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
 
 const todayAtNoon = dayjs().set('hour', 12).startOf('hour');
 const todayAt9AM = dayjs().set('hour', 9).startOf('hour');
 
 export default function DateTimeValidationMaxDateTime() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DemoContainer components={['DateTimePicker']}>
+      <DemoContainer components={['DateTimePicker', 'DateTimeRangePicker']}>
         <DemoItem label="DateTimePicker">
           <DateTimePicker defaultValue={todayAtNoon} maxDateTime={todayAt9AM} />
         </DemoItem>
+        <DemoItem label="DateTimeRangePicker">
+          <DateTimeRangePicker
+            defaultValue={[todayAt9AM, todayAtNoon]}
+            maxDateTime={todayAt9AM}
+          />
+        </DemoItem>
       </DemoContainer>
     </LocalizationProvider>
   );

diff --git a/docs/data/date-pickers/validation/DateTimeValidationMaxDateTime.tsx b/docs/data/date-pickers/validation/DateTimeValidationMaxDateTime.tsx
@@ -4,17 +4,24 @@ import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
 
 const todayAtNoon = dayjs().set('hour', 12).startOf('hour');
 const todayAt9AM = dayjs().set('hour', 9).startOf('hour');
 
 export default function DateTimeValidationMaxDateTime() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DemoContainer components={['DateTimePicker']}>
+      <DemoContainer components={['DateTimePicker', 'DateTimeRangePicker']}>
         <DemoItem label="DateTimePicker">
           <DateTimePicker defaultValue={todayAtNoon} maxDateTime={todayAt9AM} />
         </DemoItem>
+        <DemoItem label="DateTimeRangePicker">
+          <DateTimeRangePicker
+            defaultValue={[todayAt9AM, todayAtNoon]}
+            maxDateTime={todayAt9AM}
+          />
+        </DemoItem>
       </DemoContainer>
     </LocalizationProvider>
   );

diff --git a/docs/data/date-pickers/validation/DateTimeValidationMaxDateTime.tsx.preview b/docs/data/date-pickers/validation/DateTimeValidationMaxDateTime.tsx.preview
@@ -1,3 +1,9 @@
 <DemoItem label="DateTimePicker">
   <DateTimePicker defaultValue={todayAtNoon} maxDateTime={todayAt9AM} />
+</DemoItem>
+<DemoItem label="DateTimeRangePicker">
+  <DateTimeRangePicker
+    defaultValue={[todayAt9AM, todayAtNoon]}
+    maxDateTime={todayAt9AM}
+  />
 </DemoItem>
diff --git a/docs/data/date-pickers/validation/DateTimeValidationMinDateTime.js b/docs/data/date-pickers/validation/DateTimeValidationMinDateTime.js
@@ -4,17 +4,24 @@ import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
 
 const todayAtNoon = dayjs().set('hour', 12).startOf('hour');
 const todayAt3PM = dayjs().set('hour', 15).startOf('hour');
 
 export default function DateTimeValidationMinDateTime() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DemoContainer components={['DateTimePicker']}>
+      <DemoContainer components={['DateTimePicker', 'DateTimeRangePicker']}>
         <DemoItem label="DateTimePicker">
           <DateTimePicker defaultValue={todayAtNoon} minDateTime={todayAt3PM} />
         </DemoItem>
+        <DemoItem label="DateTimeRangePicker">
+          <DateTimeRangePicker
+            defaultValue={[todayAtNoon, todayAt3PM]}
+            minDateTime={todayAt3PM}
+          />
+        </DemoItem>
       </DemoContainer>
     </LocalizationProvider>
   );

diff --git a/docs/data/date-pickers/validation/DateTimeValidationMinDateTime.tsx b/docs/data/date-pickers/validation/DateTimeValidationMinDateTime.tsx
@@ -4,17 +4,24 @@ import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
 
 const todayAtNoon = dayjs().set('hour', 12).startOf('hour');
 const todayAt3PM = dayjs().set('hour', 15).startOf('hour');
 
 export default function DateTimeValidationMinDateTime() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DemoContainer components={['DateTimePicker']}>
+      <DemoContainer components={['DateTimePicker', 'DateTimeRangePicker']}>
         <DemoItem label="DateTimePicker">
           <DateTimePicker defaultValue={todayAtNoon} minDateTime={todayAt3PM} />
         </DemoItem>
+        <DemoItem label="DateTimeRangePicker">
+          <DateTimeRangePicker
+            defaultValue={[todayAtNoon, todayAt3PM]}
+            minDateTime={todayAt3PM}
+          />
+        </DemoItem>
       </DemoContainer>
     </LocalizationProvider>
   );

diff --git a/docs/data/date-pickers/validation/DateTimeValidationMinDateTime.tsx.preview b/docs/data/date-pickers/validation/DateTimeValidationMinDateTime.tsx.preview
@@ -1,3 +1,9 @@
 <DemoItem label="DateTimePicker">
   <DateTimePicker defaultValue={todayAtNoon} minDateTime={todayAt3PM} />
+</DemoItem>
+<DemoItem label="DateTimeRangePicker">
+  <DateTimeRangePicker
+    defaultValue={[todayAtNoon, todayAt3PM]}
+    minDateTime={todayAt3PM}
+  />
 </DemoItem>
diff --git a/docs/data/date-pickers/validation/DateValidationDisableFuture.js b/docs/data/date-pickers/validation/DateValidationDisableFuture.js
@@ -7,6 +7,7 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
 
 const today = dayjs();
 const tomorrow = dayjs().add(1, 'day');
@@ -21,6 +22,7 @@ export default function DateValidationDisableFuture() {
           'DateTimePicker',
           'TimePicker',
           'DateRangePicker',
+          'DateTimeRangePicker',
         ]}
       >
         <DemoItem label="DatePicker">
@@ -43,6 +45,9 @@ export default function DateValidationDisableFuture() {
         <DemoItem label="DateRangePicker" component="DateRangePicker">
           <DateRangePicker defaultValue={[today, tomorrow]} disableFuture />
         </DemoItem>
+        <DemoItem label="DateTimeRangePicker" component="DateTimeRangePicker">
+          <DateTimeRangePicker defaultValue={[today, tomorrow]} disableFuture />
+        </DemoItem>
       </DemoContainer>
     </LocalizationProvider>
   );

diff --git a/docs/data/date-pickers/validation/DateValidationDisableFuture.tsx b/docs/data/date-pickers/validation/DateValidationDisableFuture.tsx
@@ -7,6 +7,7 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
 
 const today = dayjs();
 const tomorrow = dayjs().add(1, 'day');
@@ -21,6 +22,7 @@ export default function DateValidationDisableFuture() {
           'DateTimePicker',
           'TimePicker',
           'DateRangePicker',
+          'DateTimeRangePicker',
         ]}
       >
         <DemoItem label="DatePicker">
@@ -43,6 +45,9 @@ export default function DateValidationDisableFuture() {
         <DemoItem label="DateRangePicker" component="DateRangePicker">
           <DateRangePicker defaultValue={[today, tomorrow]} disableFuture />
         </DemoItem>
+        <DemoItem label="DateTimeRangePicker" component="DateTimeRangePicker">
+          <DateTimeRangePicker defaultValue={[today, tomorrow]} disableFuture />
+        </DemoItem>
       </DemoContainer>
     </LocalizationProvider>
   );

diff --git a/docs/data/date-pickers/validation/DateValidationDisablePast.js b/docs/data/date-pickers/validation/DateValidationDisablePast.js
@@ -7,6 +7,7 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
 
 const today = dayjs();
 const yesterday = dayjs().subtract(1, 'day');
@@ -21,6 +22,7 @@ export default function DateValidationDisablePast() {
           'DateTimePicker',
           'TimePicker',
           'DateRangePicker',
+          'DateTimeRangePicker',
         ]}
       >
         <DemoItem label="DatePicker">
@@ -43,6 +45,9 @@ export default function DateValidationDisablePast() {
         <DemoItem label="DateRangePicker" component="DateRangePicker">
           <DateRangePicker defaultValue={[yesterday, today]} disablePast />
         </DemoItem>
+        <DemoItem label="DateTimeRangePicker" component="DateTimeRangePicker">
+          <DateTimeRangePicker defaultValue={[yesterday, today]} disablePast />
+        </DemoItem>
       </DemoContainer>
     </LocalizationProvider>
   );

diff --git a/docs/data/date-pickers/validation/DateValidationDisablePast.tsx b/docs/data/date-pickers/validation/DateValidationDisablePast.tsx
@@ -7,6 +7,7 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
 
 const today = dayjs();
 const yesterday = dayjs().subtract(1, 'day');
@@ -21,6 +22,7 @@ export default function DateValidationDisablePast() {
           'DateTimePicker',
           'TimePicker',
           'DateRangePicker',
+          'DateTimeRangePicker',
         ]}
       >
         <DemoItem label="DatePicker">
@@ -43,6 +45,9 @@ export default function DateValidationDisablePast() {
         <DemoItem label="DateRangePicker" component="DateRangePicker">
           <DateRangePicker defaultValue={[yesterday, today]} disablePast />
         </DemoItem>
+        <DemoItem label="DateTimeRangePicker" component="DateTimeRangePicker">
+          <DateTimeRangePicker defaultValue={[yesterday, today]} disablePast />
+        </DemoItem>
       </DemoContainer>
     </LocalizationProvider>
   );