[docs] Add the DateTimeRangePicker to the "Commonly used components…

…" demo (#13775)
mui · Jul 9, 2024 · 0f7c7c5 · 0f7c7c5
1 parent 22f8f84
commit 0f7c7c5
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 0 deletions.
diff --git 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
@@ -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>
  );