Skip to content

Commit

Permalink
[docs] Create the doc of the new time, date time and date range picke…
Browse files Browse the repository at this point in the history 
…rs (#6958)
  • Loading branch information
@flaviendelangle
flaviendelangle authored Nov 24, 2022
1 parent 522b138 commit b673ec1
Show file tree
Hide file tree
Showing 126 changed files with 2,569 additions and 922 deletions.
22 changes: 2 additions & 20 deletions docs/data/date-pickers/date-range-picker/BasicDateRangePicker.js
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,12 @@
import * as React from 'react';

import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';
import { LocalizationProvider } from '@mui/x-date-pickers-pro';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { Unstable_NextDateRangePicker as NextDateRangePicker } from '@mui/x-date-pickers-pro/NextDateRangePicker';

export default function BasicDateRangePicker() {
const [value, setValue] = React.useState([null, null]);

return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DateRangePicker
localeText={{ start: 'Check-in', end: 'Check-out' }}
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
<NextDateRangePicker localeText={{ start: 'Check-in', end: 'Check-out' }} />
</LocalizationProvider>
);
}
22 changes: 2 additions & 20 deletions docs/data/date-pickers/date-range-picker/BasicDateRangePicker.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,12 @@
import * as React from 'react';
import { Dayjs } from 'dayjs';
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';
import { LocalizationProvider } from '@mui/x-date-pickers-pro';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateRangePicker, DateRange } from '@mui/x-date-pickers-pro/DateRangePicker';
import { Unstable_NextDateRangePicker as NextDateRangePicker } from '@mui/x-date-pickers-pro/NextDateRangePicker';

export default function BasicDateRangePicker() {
const [value, setValue] = React.useState<DateRange<Dayjs>>([null, null]);

return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DateRangePicker
localeText={{ start: 'Check-in', end: 'Check-out' }}
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
<NextDateRangePicker localeText={{ start: 'Check-in', end: 'Check-out' }} />
</LocalizationProvider>
);
}
15 changes: 1 addition & 14 deletions docs/data/date-pickers/date-range-picker/BasicDateRangePicker.tsx.preview
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,3 @@
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DateRangePicker
localeText={{ start: 'Check-in', end: 'Check-out' }}
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
<NextDateRangePicker localeText={{ start: 'Check-in', end: 'Check-out' }} />
</LocalizationProvider>
85 changes: 32 additions & 53 deletions docs/data/date-pickers/date-range-picker/CalendarsDateRangePicker.js
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,43 @@
import * as React from 'react';

import PropTypes from 'prop-types';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import TextField from '@mui/material/TextField';
import { LocalizationProvider } from '@mui/x-date-pickers-pro';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import Box from '@mui/material/Box';
import { Unstable_NextDateRangePicker as NextDateRangePicker } from '@mui/x-date-pickers-pro/NextDateRangePicker';

export default function CalendarsDateRangePicker() {
const [value, setValue] = React.useState([null, null]);
function GridItem({ label, children, spacing = 1 }) {
return (
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Typography variant="body2" sx={{ mb: spacing }}>
{label}
</Typography>
{children}
</Box>
);
}

GridItem.propTypes = {
children: PropTypes.node,
label: PropTypes.string.isRequired,
spacing: PropTypes.number,
};

export default function CalendarsDateRangePicker() {
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<div>
<Typography sx={{ mt: 2, mb: 1 }}>1 calendar </Typography>
<DateRangePicker
calendars={1}
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
<Typography sx={{ mt: 2, mb: 1 }}>2 calendars</Typography>
<DateRangePicker
calendars={2}
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
<Typography sx={{ mt: 2, mb: 1 }}>3 calendars</Typography>
<DateRangePicker
calendars={3}
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
</div>
<Stack spacing={4}>
<GridItem label="1 calendar" spacing={2}>
<NextDateRangePicker calendars={1} />
</GridItem>
<GridItem label="2 calendars" spacing={2}>
<NextDateRangePicker calendars={2} />
</GridItem>
<GridItem label="3 calendars" spacing={2}>
<NextDateRangePicker calendars={3} />
</GridItem>
</Stack>
</LocalizationProvider>
);
}
86 changes: 33 additions & 53 deletions docs/data/date-pickers/date-range-picker/CalendarsDateRangePicker.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,44 @@
import * as React from 'react';
import { Dayjs } from 'dayjs';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import TextField from '@mui/material/TextField';
import { LocalizationProvider } from '@mui/x-date-pickers-pro';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateRangePicker, DateRange } from '@mui/x-date-pickers-pro/DateRangePicker';
import Box from '@mui/material/Box';
import { Unstable_NextDateRangePicker as NextDateRangePicker } from '@mui/x-date-pickers-pro/NextDateRangePicker';

export default function CalendarsDateRangePicker() {
const [value, setValue] = React.useState<DateRange<Dayjs>>([null, null]);
function GridItem({
label,
children,
spacing = 1,
}: {
label: string;
children: React.ReactNode;
spacing?: number;
}) {
return (
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Typography variant="body2" sx={{ mb: spacing }}>
{label}
</Typography>
{children}
</Box>
);
}

export default function CalendarsDateRangePicker() {
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<div>
<Typography sx={{ mt: 2, mb: 1 }}>1 calendar </Typography>
<DateRangePicker
calendars={1}
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
<Typography sx={{ mt: 2, mb: 1 }}>2 calendars</Typography>
<DateRangePicker
calendars={2}
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
<Typography sx={{ mt: 2, mb: 1 }}>3 calendars</Typography>
<DateRangePicker
calendars={3}
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
</div>
<Stack spacing={4}>
<GridItem label="1 calendar" spacing={2}>
<NextDateRangePicker calendars={1} />
</GridItem>
<GridItem label="2 calendars" spacing={2}>
<NextDateRangePicker calendars={2} />
</GridItem>
<GridItem label="3 calendars" spacing={2}>
<NextDateRangePicker calendars={3} />
</GridItem>
</Stack>
</LocalizationProvider>
);
}
13 changes: 13 additions & 0 deletions docs/data/date-pickers/date-range-picker/CalendarsDateRangePicker.tsx.preview
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<LocalizationProvider dateAdapter={AdapterDayjs}>
<Stack spacing={4}>
<GridItem label="1 calendar" spacing={2}>
<NextDateRangePicker calendars={1} />
</GridItem>
<GridItem label="2 calendars" spacing={2}>
<NextDateRangePicker calendars={2} />
</GridItem>
<GridItem label="3 calendars" spacing={2}>
<NextDateRangePicker calendars={3} />
</GridItem>
</Stack>
</LocalizationProvider>
20 changes: 4 additions & 16 deletions docs/data/date-pickers/date-range-picker/CustomDateRangePickerDay.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import * as React from 'react';
import dayjs from 'dayjs';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import { LocalizationProvider } from '@mui/x-date-pickers-pro';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
import { Unstable_StaticNextDateRangePicker as StaticNextDateRangePicker } from '@mui/x-date-pickers-pro/StaticNextDateRangePicker';
import { DateRangePickerDay as MuiDateRangePickerDay } from '@mui/x-date-pickers-pro/DateRangePickerDay';

const DateRangePickerDay = styled(MuiDateRangePickerDay)(
Expand Down Expand Up @@ -36,23 +35,12 @@ const DateRangePickerDay = styled(MuiDateRangePickerDay)(
);

export default function CustomDateRangePickerDay() {
const [value, setValue] = React.useState([null, null]);

return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<StaticDateRangePicker
<StaticNextDateRangePicker
displayStaticWrapperAs="desktop"
label="date range"
value={value}
onChange={(newValue) => setValue(newValue)}
defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
components={{ Day: DateRangePickerDay }}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
</LocalizationProvider>
);
Expand Down
22 changes: 4 additions & 18 deletions docs/data/date-pickers/date-range-picker/CustomDateRangePickerDay.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import { LocalizationProvider } from '@mui/x-date-pickers-pro';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
import { Unstable_StaticNextDateRangePicker as StaticNextDateRangePicker } from '@mui/x-date-pickers-pro/StaticNextDateRangePicker';
import {
DateRangePickerDay as MuiDateRangePickerDay,
DateRangePickerDayProps,
} from '@mui/x-date-pickers-pro/DateRangePickerDay';
import { DateRange } from '@mui/x-date-pickers-pro/DateRangePicker';
import { Dayjs } from 'dayjs';

const DateRangePickerDay = styled(MuiDateRangePickerDay)(
({
Expand Down Expand Up @@ -41,23 +38,12 @@ const DateRangePickerDay = styled(MuiDateRangePickerDay)(
) as React.ComponentType<DateRangePickerDayProps<Dayjs>>;

export default function CustomDateRangePickerDay() {
const [value, setValue] = React.useState<DateRange<Dayjs>>([null, null]);

return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<StaticDateRangePicker
<StaticNextDateRangePicker
displayStaticWrapperAs="desktop"
label="date range"
value={value}
onChange={(newValue) => setValue(newValue)}
defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
components={{ Day: DateRangePickerDay }}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
</LocalizationProvider>
);
Expand Down
13 changes: 2 additions & 11 deletions docs/data/date-pickers/date-range-picker/CustomDateRangePickerDay.tsx.preview
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,7 @@
<LocalizationProvider dateAdapter={AdapterDayjs}>
<StaticDateRangePicker
<StaticNextDateRangePicker
displayStaticWrapperAs="desktop"
label="date range"
value={value}
onChange={(newValue) => setValue(newValue)}
defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
components={{ Day: DateRangePickerDay }}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
</LocalizationProvider>
Loading

0 comments on commit b673ec1

Please sign in to comment.