Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Document the PickerValidDate type override #13476

Merged
merged 5 commits into from
Jun 14, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion docs/data/date-pickers/base-concepts/base-concepts.md
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,9 @@ Make sure to provide an `aria-labelledby` prop to `popper` and/or `mobilePaper`

## TypeScript

In order to benefit from the [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users need to import the following types.
### Theme augmentation

To benefit from the [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users need to import the following types.
flaviendelangle marked this conversation as resolved.
Show resolved Hide resolved
Internally, it uses module augmentation to extend the default theme structure.

```tsx
Expand Down Expand Up @@ -146,6 +148,24 @@ You don't have to import the theme augmentation from both `@mui/x-date-pickers`
Importing it from `@mui/x-date-pickers-pro` is enough.
:::

### Typing of the date

The Date and Time Pickers components are compatible with several date libraries
that use different formats to represent their dates
(`Date` object for `date-fns`, `daysjs.Dayjs` object for `days-js` etc...).
flaviendelangle marked this conversation as resolved.
Show resolved Hide resolved
To correctly type all the props that are date-related, the adapters override a global type named `PickerValidDate`
to allow the usage of their own date format.
This allows TypeScript to throw an error if you try to pass `value={new Date()}` to a component using `AdapterDayjs` for instance.

If you run into TypeScript errors such as `DesktopDatePickerProps<Date> error Type 'Date' does not satisfy the constraint 'never'`,
it is probably because you are not importing the adapter in the same TypeScript project as the rest of your codebase.
You can fix it by manually importing the adapter in some file of your project as follows:

```ts
// Replace `AdapterDayjs` with the adapter you are using.
import type {} from '@mui/x-date-pickers/AdapterDayjs';
```

## Testing caveats

### Responsive components
Expand Down
18 changes: 17 additions & 1 deletion docs/data/migration/migration-pickers-v6/migration-pickers-v6.md
Original file line number Diff line number Diff line change
Expand Up @@ -290,6 +290,22 @@ The string argument of the `dayOfWeekFormatter` prop has been replaced in favor
/>
```

### Strict typing of the date-related props

All the date-related props are now strictly typed to only accept the date format supported by your adapter
(`Date` object for `date-fns`, `daysjs.Dayjs` object for `days-js` etc...).
flaviendelangle marked this conversation as resolved.
Show resolved Hide resolved

If you run into TypeScript errors such as `DesktopDatePickerProps<Date> error Type 'Date' does not satisfy the constraint 'never'`,
flaviendelangle marked this conversation as resolved.
Show resolved Hide resolved
it is probably because you are not importing the adapter in the same TypeScript project as the rest of your codebase.
You can fix it by manually importing the adapter in some file of your project as follows:

```ts
// Replace `AdapterDayjs` with the adapter you are using.
import type {} from '@mui/x-date-pickers/AdapterDayjs';
```

Learn more about this change on the [dedicated doc section](/x/react-date-pickers/base-concepts/#typing-of-the-date).

## Field components

### Update the format of `selectedSections`
Expand Down Expand Up @@ -517,7 +533,7 @@ The `dayPickerClasses` variable has been renamed `dayCalendarClasses` to be cons

The `dateLibInstance` prop of `LocalizationProvider` does not work with `AdapterDayjs` anymore.
This prop was used to set the pickers in UTC mode before the implementation of a proper timezone support in the components.
You can learn more about the new approach on the [dedicated doc page](https://mui.com/x/react-date-pickers/timezone/).
Learn more about the new approach on the [dedicated doc page](https://mui.com/x/react-date-pickers/timezone/).
flaviendelangle marked this conversation as resolved.
Show resolved Hide resolved

```diff
// When a `value` or a `defaultValue` is provided
Expand Down
Loading