[docs] Cleanup the doc pages of the community pickers

docs/data/date-pickers/date-calendar/DateCalendarViews.js

@@ -10,19 +10,13 @@ export default function DateCalendarViews() {
  <LocalizationProvider dateAdapter={AdapterDayjs}>
  <DemoContainer>
  <DemoItem label={'"year", "month" and "day"'}>
- <DateCalendar
- defaultValue={dayjs('2022-04-07')}
- views={['year', 'month', 'day']}
- />
+ <DateCalendar defaultValue={dayjs('2022-04-07')} />
  </DemoItem>
  <DemoItem label={'"day"'}>
- <DateCalendar defaultValue={dayjs('2022-04-07')} views={['day']} />
+ <DateCalendar views={['day']} />
  </DemoItem>
  <DemoItem label={'"month" and "year"'}>
- <DateCalendar
- defaultValue={dayjs('2022-04-07')}
- views={['month', 'year']}
- />
+ <DateCalendar defaultValue={dayjs('2022-04-07')} />
  </DemoItem>
  </DemoContainer>
  </LocalizationProvider>

docs/data/date-pickers/date-calendar/DateCalendarViews.tsx

@@ -10,19 +10,13 @@ export default function DateCalendarViews() {
  <LocalizationProvider dateAdapter={AdapterDayjs}>
  <DemoContainer>
  <DemoItem label={'"year", "month" and "day"'}>
- <DateCalendar
- defaultValue={dayjs('2022-04-07')}
- views={['year', 'month', 'day']}
- />
+ <DateCalendar defaultValue={dayjs('2022-04-07')} />
  </DemoItem>
  <DemoItem label={'"day"'}>
- <DateCalendar defaultValue={dayjs('2022-04-07')} views={['day']} />
+ <DateCalendar views={['day']} />
  </DemoItem>
  <DemoItem label={'"month" and "year"'}>
- <DateCalendar
- defaultValue={dayjs('2022-04-07')}
- views={['month', 'year']}
- />
+ <DateCalendar defaultValue={dayjs('2022-04-07')} />
  </DemoItem>
  </DemoContainer>
  </LocalizationProvider>

docs/data/date-pickers/date-calendar/DateCalendarViews.tsx.preview

@@ -1,15 +1,9 @@
 <DemoItem label={'"year", "month" and "day"'}>
- <DateCalendar
- defaultValue={dayjs('2022-04-07')}
- views={['year', 'month', 'day']}
- />
+ <DateCalendar defaultValue={dayjs('2022-04-07')} />
 </DemoItem>
 <DemoItem label={'"day"'}>
- <DateCalendar defaultValue={dayjs('2022-04-07')} views={['day']} />
+ <DateCalendar views={['day']} />
 </DemoItem>
 <DemoItem label={'"month" and "year"'}>
- <DateCalendar
- defaultValue={dayjs('2022-04-07')}
- views={['month', 'year']}
- />
+ <DateCalendar defaultValue={dayjs('2022-04-07')} />
 </DemoItem>

docs/data/date-pickers/date-calendar/date-calendar.md

@@ -8,7 +8,7 @@ packageName: '@mui/x-date-pickers'
 
 # Date Calendar
 
-<p class="description">The Date Calendar lets the user select a date without any input or popper / modal.</p>
+<p class="description">The Date Calendar component lets the user select a date without any input or popper / modal.</p>
 
 ## Basic usage
 

docs/data/date-pickers/date-field/date-field.md

@@ -8,7 +8,7 @@ packageName: '@mui/x-date-pickers'
 
 # Date Field
 
-<p class="description">The Date Field let the user select a date with the keyboard.</p>
+<p class="description">The Date Field component let the user select a date with the keyboard.</p>
 
 :::warning
 This component is unstable.

docs/data/date-pickers/date-picker/CustomInput.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import dayjs from 'dayjs';
 import Box from '@mui/material/Box';
 
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
@@ -52,7 +51,6 @@ export default function CustomInput() {
  <LocalizationProvider dateAdapter={AdapterDayjs}>
  <NextDatePicker
  label="Custom input"
- defaultValue={dayjs('2022-04-07')}
  components={{
  TextField: BrowserInput,
  }}

docs/data/date-pickers/date-picker/CustomInput.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import dayjs from 'dayjs';
 import Box from '@mui/material/Box';
 import { TextFieldProps } from '@mui/material/TextField';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
@@ -26,7 +25,6 @@ export default function CustomInput() {
  <LocalizationProvider dateAdapter={AdapterDayjs}>
  <NextDatePicker
  label="Custom input"
- defaultValue={dayjs('2022-04-07')}
  components={{
  TextField: BrowserInput,
  }}

docs/data/date-pickers/date-picker/CustomInput.tsx.preview

@@ -1,6 +1,5 @@
 <NextDatePicker
  label="Custom input"
- defaultValue={dayjs('2022-04-07')}
  components={{
  TextField: BrowserInput,
  }}

docs/data/date-pickers/date-picker/DatePickerOpenTo.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { DemoContainer } from 'docsx/src/modules/components/DemoContainer';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { Unstable_NextDatePicker as NextDatePicker } from '@mui/x-date-pickers/NextDatePicker';
+
+export default function DatePickerOpenTo() {
+ return (
+ <LocalizationProvider dateAdapter={AdapterDayjs}>
+ <DemoContainer>
+ <NextDatePicker label={'"year"'} openTo="year" />
+ <NextDatePicker
+ label={'"month"'}
+ openTo="month"
+ views={['year', 'month', 'day']}
+ />
+ </DemoContainer>
+ </LocalizationProvider>
+ );
+}

docs/data/date-pickers/date-picker/DatePickerOpenTo.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { DemoContainer } from 'docsx/src/modules/components/DemoContainer';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { Unstable_NextDatePicker as NextDatePicker } from '@mui/x-date-pickers/NextDatePicker';
+
+export default function DatePickerOpenTo() {
+ return (
+ <LocalizationProvider dateAdapter={AdapterDayjs}>
+ <DemoContainer>
+ <NextDatePicker label={'"year"'} openTo="year" />
+ <NextDatePicker
+ label={'"month"'}
+ openTo="month"
+ views={['year', 'month', 'day']}
+ />
+ </DemoContainer>
+ </LocalizationProvider>
+ );
+}

docs/data/date-pickers/date-picker/DatePickerOpenTo.tsx.preview

@@ -0,0 +1,6 @@
+<NextDatePicker label={'"year"'} openTo="year" />
+<NextDatePicker
+ label={'"month"'}
+ openTo="month"
+ views={['year', 'month', 'day']}
+/>

docs/data/date-pickers/date-picker/DatePickerViews.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import dayjs from 'dayjs';
 import { DemoContainer } from 'docsx/src/modules/components/DemoContainer';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
@@ -11,19 +10,10 @@ export default function DatePickerViews() {
  <DemoContainer>
  <NextDatePicker
  label={'"year", "month" and "day"'}
- defaultValue={dayjs('2022-04-07')}
  views={['year', 'month', 'day']}
  />
- <NextDatePicker
- label={'"day"'}
- defaultValue={dayjs('2022-04-07')}
- views={['day']}
- />
- <NextDatePicker
- label={'"month" and "year"'}
- defaultValue={dayjs('2022-04-07')}
- views={['month', 'year']}
- />
+ <NextDatePicker label={'"day"'} views={['day']} />
+ <NextDatePicker label={'"month" and "year"'} views={['month', 'year']} />
  </DemoContainer>
  </LocalizationProvider>
  );

docs/data/date-pickers/date-picker/DatePickerViews.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import dayjs from 'dayjs';
 import { DemoContainer } from 'docsx/src/modules/components/DemoContainer';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
@@ -11,19 +10,10 @@ export default function DatePickerViews() {
  <DemoContainer>
  <NextDatePicker
  label={'"year", "month" and "day"'}
- defaultValue={dayjs('2022-04-07')}
  views={['year', 'month', 'day']}
  />
- <NextDatePicker
- label={'"day"'}
- defaultValue={dayjs('2022-04-07')}
- views={['day']}
- />
- <NextDatePicker
- label={'"month" and "year"'}
- defaultValue={dayjs('2022-04-07')}
- views={['month', 'year']}
- />
+ <NextDatePicker label={'"day"'} views={['day']} />
+ <NextDatePicker label={'"month" and "year"'} views={['month', 'year']} />
  </DemoContainer>
  </LocalizationProvider>
  );

docs/data/date-pickers/date-picker/DatePickerViews.tsx.preview

@@ -1,15 +1,6 @@
 <NextDatePicker
  label={'"year", "month" and "day"'}
- defaultValue={dayjs('2022-04-07')}
  views={['year', 'month', 'day']}
 />
-<NextDatePicker
- label={'"day"'}
- defaultValue={dayjs('2022-04-07')}
- views={['day']}
-/>
-<NextDatePicker
- label={'"month" and "year"'}
- defaultValue={dayjs('2022-04-07')}
- views={['month', 'year']}
-/>
+<NextDatePicker label={'"day"'} views={['day']} />
+<NextDatePicker label={'"month" and "year"'} views={['month', 'year']} />

docs/data/date-pickers/date-picker/ResponsiveDatePickers.js

@@ -1,25 +1,29 @@
 import * as React from 'react';
 import dayjs from 'dayjs';
-import { DemoContainer } from 'docsx/src/modules/components/DemoContainer';
+import { DemoContainer, DemoItem } from 'docsx/src/modules/components/DemoContainer';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { Unstable_NextDatePicker as NextDatePicker } from '@mui/x-date-pickers/NextDatePicker';
 import { Unstable_MobileNextDatePicker as MobileNextDatePicker } from '@mui/x-date-pickers/MobileNextDatePicker';
 import { Unstable_DesktopNextDatePicker as DesktopNextDatePicker } from '@mui/x-date-pickers/DesktopNextDatePicker';
+import { Unstable_StaticNextDatePicker as StaticNextDatePicker } from '@mui/x-date-pickers';
 
 export default function ResponsiveDatePickers() {
  return (
  <LocalizationProvider dateAdapter={AdapterDayjs}>
  <DemoContainer>
- <MobileNextDatePicker
- label="For mobile"
- defaultValue={dayjs('2022-04-07')}
- />
- <DesktopNextDatePicker
- label="For desktop"
- defaultValue={dayjs('2022-04-07')}
- />
- <NextDatePicker label="Responsive" defaultValue={dayjs('2022-04-07')} />
+ <DemoItem label="Desktop variant">
+ <DesktopNextDatePicker defaultValue={dayjs('2022-04-07')} />
+ </DemoItem>
+ <DemoItem label="Mobile variant">
+ <MobileNextDatePicker defaultValue={dayjs('2022-04-07')} />
+ </DemoItem>
+ <DemoItem label="Responsive variant">
+ <NextDatePicker defaultValue={dayjs('2022-04-07')} />
+ </DemoItem>
+ <DemoItem label="Static variant">
+ <StaticNextDatePicker defaultValue={dayjs('2022-04-07')} />
+ </DemoItem>
  </DemoContainer>
  </LocalizationProvider>
  );

docs/data/date-pickers/date-picker/ResponsiveDatePickers.tsx

@@ -1,25 +1,29 @@
 import * as React from 'react';
 import dayjs from 'dayjs';
-import { DemoContainer } from 'docsx/src/modules/components/DemoContainer';
+import { DemoContainer, DemoItem } from 'docsx/src/modules/components/DemoContainer';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { Unstable_NextDatePicker as NextDatePicker } from '@mui/x-date-pickers/NextDatePicker';
 import { Unstable_MobileNextDatePicker as MobileNextDatePicker } from '@mui/x-date-pickers/MobileNextDatePicker';
 import { Unstable_DesktopNextDatePicker as DesktopNextDatePicker } from '@mui/x-date-pickers/DesktopNextDatePicker';
+import { Unstable_StaticNextDatePicker as StaticNextDatePicker } from '@mui/x-date-pickers';
 
 export default function ResponsiveDatePickers() {
  return (
  <LocalizationProvider dateAdapter={AdapterDayjs}>
  <DemoContainer>
- <MobileNextDatePicker
- label="For mobile"
- defaultValue={dayjs('2022-04-07')}
- />
- <DesktopNextDatePicker
- label="For desktop"
- defaultValue={dayjs('2022-04-07')}
- />
- <NextDatePicker label="Responsive" defaultValue={dayjs('2022-04-07')} />
+ <DemoItem label="Desktop variant">
+ <DesktopNextDatePicker defaultValue={dayjs('2022-04-07')} />
+ </DemoItem>
+ <DemoItem label="Mobile variant">
+ <MobileNextDatePicker defaultValue={dayjs('2022-04-07')} />
+ </DemoItem>
+ <DemoItem label="Responsive variant">
+ <NextDatePicker defaultValue={dayjs('2022-04-07')} />
+ </DemoItem>
+ <DemoItem label="Static variant">
+ <StaticNextDatePicker defaultValue={dayjs('2022-04-07')} />
+ </DemoItem>
  </DemoContainer>
  </LocalizationProvider>
  );

docs/data/date-pickers/date-picker/ResponsiveDatePickers.tsx.preview

@@ -1,9 +1,12 @@
-<MobileNextDatePicker
- label="For mobile"
- defaultValue={dayjs('2022-04-07')}
-/>
-<DesktopNextDatePicker
- label="For desktop"
- defaultValue={dayjs('2022-04-07')}
-/>
-<NextDatePicker label="Responsive" defaultValue={dayjs('2022-04-07')} />
+<DemoItem label="Desktop variant">
+ <DesktopNextDatePicker defaultValue={dayjs('2022-04-07')} />
+</DemoItem>
+<DemoItem label="Mobile variant">
+ <MobileNextDatePicker defaultValue={dayjs('2022-04-07')} />
+</DemoItem>
+<DemoItem label="Responsive variant">
+ <NextDatePicker defaultValue={dayjs('2022-04-07')} />
+</DemoItem>
+<DemoItem label="Static variant">
+ <StaticNextDatePicker defaultValue={dayjs('2022-04-07')} />
+</DemoItem>

docs/data/date-pickers/date-picker/StaticDatePickerLandscape.js

@@ -1,16 +1,12 @@
 import * as React from 'react';
-import dayjs from 'dayjs';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { Unstable_StaticNextDatePicker as StaticNextDatePicker } from '@mui/x-date-pickers/StaticNextDatePicker';
 
 export default function StaticDatePickerLandscape() {
  return (
  <LocalizationProvider dateAdapter={AdapterDayjs}>
- <StaticNextDatePicker
- orientation="landscape"
- defaultValue={dayjs('2022-04-07')}
- />
+ <StaticNextDatePicker orientation="landscape" />
  </LocalizationProvider>
  );
 }