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

[pickers] Improve PickerValidDate type #14771

Merged
merged 4 commits into from
Oct 1, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
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
19 changes: 16 additions & 3 deletions docs/data/date-pickers/base-concepts/base-concepts.md
Original file line number Diff line number Diff line change
Expand Up @@ -185,15 +185,28 @@ To correctly type all the props that are date-related, the adapters override a g
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:
If you are not sure your adapter is set up correctly to infer the type of date-related props, you can import the `PickerValidDate` type and check its current value.

If its equal to the format used by your date library, then you don't have to do anything:

<img src="/static/x/date-pickers/picker-valid-date-configured.png" alt="PickerValidDate correctly configured" />

If it's equal to `any`, you can fix it by manually importing the adapter in some file of your project as show below:

<img src="/static/x/date-pickers/picker-valid-date-not-configured.png" alt="PickerValidDate not correctly configured" />

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

:::info
Before version 7.19.0, TypeScript was throwing an error such as `DesktopDatePickerProps<Date> error Type 'Date' does not satisfy the constraint 'never'`
when you were not importing the adapter in the same TypeScript project as the rest of your codebase.

The fix described above should also solve the problem.
:::

## Testing caveats

### Responsive components
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 3 additions & 1 deletion packages/x-date-pickers/src/models/pickers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,6 @@ export interface PickerChangeHandlerContext<TError> {

export interface PickerValidDateLookup {}

export type PickerValidDate = PickerValidDateLookup[keyof PickerValidDateLookup];
export type PickerValidDate = keyof PickerValidDateLookup extends number
? any
: PickerValidDateLookup[keyof PickerValidDateLookup];