Skip to content

Commit

Permalink
[pickers] Do not hardcode date-fns elements in field components (#5975)
Browse files Browse the repository at this point in the history
  • Loading branch information
@flaviendelangle
flaviendelangle committed Sep 1, 2022
1 parent 4cebcdf commit a15c23f
Show file tree
Hide file tree
Showing 40 changed files with 369 additions and 283 deletions.
4 changes: 2 additions & 2 deletions docs/data/date-pickers/date-field/BasicDateField.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import * as React from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { Unstable_DateField as DateField } from '@mui/x-date-pickers/DateField';

export default function BasicDateField() {
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DateField label="Basic date field" />
</LocalizationProvider>
);
Expand Down
4 changes: 2 additions & 2 deletions docs/data/date-pickers/date-field/BasicDateField.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import * as React from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { Unstable_DateField as DateField } from '@mui/x-date-pickers/DateField';

export default function BasicDateField() {
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DateField label="Basic date field" />
</LocalizationProvider>
);
Expand Down
2 changes: 1 addition & 1 deletion docs/data/date-pickers/date-field/BasicDateField.tsx.preview
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<LocalizationProvider dateAdapter={AdapterDateFns}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DateField label="Basic date field" />
</LocalizationProvider>
17 changes: 9 additions & 8 deletions docs/data/date-pickers/date-field/CustomDateFormat.js
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,45 @@
import * as React from 'react';
import dayjs from 'dayjs';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { Unstable_DateField as DateField } from '@mui/x-date-pickers/DateField';
import Stack from '@mui/material/Stack';

export default function CustomDateFormat() {
const [value, setValue] = React.useState(new Date());
const [value, setValue] = React.useState(dayjs());

return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<Stack spacing={2} sx={(theme) => ({ width: theme.spacing(48) })}>
<DateField
label="Dash separator"
value={value}
onChange={(newValue) => setValue(newValue)}
format="dd-MM-yyyy"
format="DD-MM-YYYY"
/>
<DateField
label="Dash and white space separator"
value={value}
onChange={(newValue) => setValue(newValue)}
format="dd / MM / yyyy"
format="DD / MM / YYYY"
/>
<DateField
label="Full letter month"
value={value}
onChange={(newValue) => setValue(newValue)}
format="dd MMMM yyyy"
format="DD MMMM YYYY"
/>
<DateField
label="Date and time format"
value={value}
onChange={(newValue) => setValue(newValue)}
format="Pp"
format="L LT"
/>
<DateField
label="Time format"
value={value}
onChange={(newValue) => setValue(newValue)}
format="p"
format="LT"
/>
</Stack>
</LocalizationProvider>
Expand Down
17 changes: 9 additions & 8 deletions docs/data/date-pickers/date-field/CustomDateFormat.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,45 @@
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { Unstable_DateField as DateField } from '@mui/x-date-pickers/DateField';
import Stack from '@mui/material/Stack';

export default function CustomDateFormat() {
const [value, setValue] = React.useState<Date | null>(new Date());
const [value, setValue] = React.useState<Dayjs | null>(dayjs());

return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<Stack spacing={2} sx={(theme) => ({ width: theme.spacing(48) })}>
<DateField
label="Dash separator"
value={value}
onChange={(newValue) => setValue(newValue)}
format="dd-MM-yyyy"
format="DD-MM-YYYY"
/>
<DateField
label="Dash and white space separator"
value={value}
onChange={(newValue) => setValue(newValue)}
format="dd / MM / yyyy"
format="DD / MM / YYYY"
/>
<DateField
label="Full letter month"
value={value}
onChange={(newValue) => setValue(newValue)}
format="dd MMMM yyyy"
format="DD MMMM YYYY"
/>
<DateField
label="Date and time format"
value={value}
onChange={(newValue) => setValue(newValue)}
format="Pp"
format="L LT"
/>
<DateField
label="Time format"
value={value}
onChange={(newValue) => setValue(newValue)}
format="p"
format="LT"
/>
</Stack>
</LocalizationProvider>
Expand Down
7 changes: 4 additions & 3 deletions docs/data/date-pickers/date-field/CustomInputProps.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import * as React from 'react';
import dayjs from 'dayjs';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { Unstable_DateField as DateField } from '@mui/x-date-pickers/DateField';
import Stack from '@mui/material/Stack';
import IconButton from '@mui/material/IconButton';
import CancelIcon from '@mui/icons-material/Close';

export default function CustomInputProps() {
const [value, setValue] = React.useState(new Date());
const [value, setValue] = React.useState(dayjs());

return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<Stack spacing={2} sx={(theme) => ({ width: theme.spacing(48) })}>
<DateField
label="Custom variant"
Expand Down
7 changes: 4 additions & 3 deletions docs/data/date-pickers/date-field/CustomInputProps.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { Unstable_DateField as DateField } from '@mui/x-date-pickers/DateField';
import Stack from '@mui/material/Stack';
import IconButton from '@mui/material/IconButton';
import CancelIcon from '@mui/icons-material/Close';

export default function CustomInputProps() {
const [value, setValue] = React.useState<Date | null>(new Date());
const [value, setValue] = React.useState<Dayjs | null>(dayjs());

return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<Stack spacing={2} sx={(theme) => ({ width: theme.spacing(48) })}>
<DateField
label="Custom variant"
Expand Down
7 changes: 4 additions & 3 deletions docs/data/date-pickers/date-field/CustomUIDateField.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import * as React from 'react';
import dayjs from 'dayjs';
import { CssVarsProvider } from '@mui/joy/styles';
import Stack from '@mui/material/Stack';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormLabel from '@mui/joy/FormLabel';
import JoyTextField from '@mui/joy/TextField';
import InputUnstyled from '@mui/base/InputUnstyled';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField';

const JoyDateField = (props) => {
Expand Down Expand Up @@ -41,13 +42,13 @@ const BrowserInputDateField = (props) => {
};

export default function CustomUIDateField() {
const [value, setValue] = React.useState(new Date());
const [value, setValue] = React.useState(dayjs());

const handleChange = (newValue) => setValue(newValue);

return (
<CssVarsProvider>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<Stack spacing={2}>
<JoyDateField
label="Using @mui/joy TextField"
Expand Down
31 changes: 17 additions & 14 deletions docs/data/date-pickers/date-field/CustomUIDateField.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { CssVarsProvider } from '@mui/joy/styles';
import Stack from '@mui/material/Stack';
import FormControlLabel from '@mui/material/FormControlLabel';
Expand All @@ -8,16 +9,16 @@ import JoyTextField, {
} from '@mui/joy/TextField';
import InputUnstyled, { InputUnstyledProps } from '@mui/base/InputUnstyled';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import {
unstable_useDateField as useDateField,
UseDateFieldComponentProps,
} from '@mui/x-date-pickers/DateField';

type JoyDateFieldProps = UseDateFieldComponentProps<Date, Date, JoyTextFieldProps>;
type JoyDateFieldProps = UseDateFieldComponentProps<Dayjs, Dayjs, JoyTextFieldProps>;

const JoyDateField = (props: JoyDateFieldProps) => {
const { inputRef, inputProps } = useDateField<Date, Date, JoyDateFieldProps>(
const { inputRef, inputProps } = useDateField<Dayjs, Dayjs, JoyDateFieldProps>(
props,
);

Expand All @@ -30,15 +31,17 @@ const JoyDateField = (props: JoyDateFieldProps) => {
};

type UnstyledDateFieldProps = UseDateFieldComponentProps<
Date,
Date,
Dayjs,
Dayjs,
InputUnstyledProps
>;

const UnstyledDateField = (props: UnstyledDateFieldProps) => {
const { inputRef, inputProps } = useDateField<Date, Date, UnstyledDateFieldProps>(
props,
);
const { inputRef, inputProps } = useDateField<
Dayjs,
Dayjs,
UnstyledDateFieldProps
>(props);

return (
<InputUnstyled
Expand All @@ -49,28 +52,28 @@ const UnstyledDateField = (props: UnstyledDateFieldProps) => {
};

type BrowserInputDateFieldProps = UseDateFieldComponentProps<
Date,
Date,
Dayjs,
Dayjs,
React.HTMLAttributes<HTMLInputElement>
>;

const BrowserInputDateField = (props: BrowserInputDateFieldProps) => {
const {
inputRef,
inputProps: { error, ...inputProps },
} = useDateField<Date, Date, BrowserInputDateFieldProps>(props);
} = useDateField<Dayjs, Dayjs, BrowserInputDateFieldProps>(props);

return <input {...inputProps} ref={inputRef} />;
};

export default function CustomUIDateField() {
const [value, setValue] = React.useState<Date | null>(new Date());
const [value, setValue] = React.useState<Dayjs | null>(dayjs());

const handleChange = (newValue: Date | null) => setValue(newValue);
const handleChange = (newValue: Dayjs | null) => setValue(newValue);

return (
<CssVarsProvider>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<Stack spacing={2}>
<JoyDateField
label="Using @mui/joy TextField"
Expand Down
23 changes: 14 additions & 9 deletions docs/data/date-pickers/date-field/DateFieldValidation.js
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,40 @@
import * as React from 'react';
import addDays from 'date-fns/addDays';
import isWeekend from 'date-fns/isWeekend';
import dayjs from 'dayjs';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { Unstable_DateField as DateField } from '@mui/x-date-pickers/DateField';
import Stack from '@mui/material/Stack';

const today = new Date();
const today = dayjs();

const isWeekend = (date) => {
const day = date.day();

return day === 0 || day === 6;
};

export default function DateFieldValidation() {
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<Stack spacing={2}>
<DateField
label="props.minDate = today"
defaultValue={addDays(today, -1)}
defaultValue={today.subtract(1, 'day')}
minDate={today}
/>
<DateField
label="props.maxDate = today"
defaultValue={addDays(today, 1)}
defaultValue={today.add(1, 'day')}
maxDate={today}
/>
<DateField
label="props.disablePast = true"
defaultValue={addDays(today, -1)}
defaultValue={today.subtract(1, 'day')}
disablePast
/>
<DateField
label="props.disableFuture = true"
defaultValue={addDays(today, 1)}
defaultValue={today.add(1, 'day')}
disableFuture
/>
<DateField
Expand Down
23 changes: 14 additions & 9 deletions docs/data/date-pickers/date-field/DateFieldValidation.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,40 @@
import * as React from 'react';
import addDays from 'date-fns/addDays';
import isWeekend from 'date-fns/isWeekend';
import dayjs, { Dayjs } from 'dayjs';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { Unstable_DateField as DateField } from '@mui/x-date-pickers/DateField';
import Stack from '@mui/material/Stack';

const today = new Date();
const today = dayjs();

const isWeekend = (date: Dayjs) => {
const day = date.day();

return day === 0 || day === 6;
};

export default function DateFieldValidation() {
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<Stack spacing={2}>
<DateField
label="props.minDate = today"
defaultValue={addDays(today, -1)}
defaultValue={today.subtract(1, 'day')}
minDate={today}
/>
<DateField
label="props.maxDate = today"
defaultValue={addDays(today, 1)}
defaultValue={today.add(1, 'day')}
maxDate={today}
/>
<DateField
label="props.disablePast = true"
defaultValue={addDays(today, -1)}
defaultValue={today.subtract(1, 'day')}
disablePast
/>
<DateField
label="props.disableFuture = true"
defaultValue={addDays(today, 1)}
defaultValue={today.add(1, 'day')}
disableFuture
/>
<DateField
Expand Down
Loading

0 comments on commit a15c23f

Please sign in to comment.