CODEWITHSUNDEEP
typescriptmaterial-ui
Socrates
Socrates

Reputation: 9564

Material UI Date Time Picker example

I am trying to understand the Material UI Date Time Picker.

The problem is that the given example on Codesandbox leads to errors, because the following import cannot be found:

import DateFnsUtils from '@date-io/date-fns';

I already have tried unsuccessfully to get rid of that error in several tests. My guess is that it imports a corrupt version from npm. Hence, I believe it must be one of the following packages within the package.json:

"date-fns": "next",
"@types/date-ioDate-fns": "latest",
"@types/date-fns": "latest",
"@date-io/date-fns": "latest"

Is there a way not to use date-fns in order to get the example up and running?

Upvotes: 2

Views: 3281

Answers (2)

Samuel Hulla
Samuel Hulla

Reputation: 7089

Just add tslib to your list of dependencies, as @date-io/date-fns has an unmet peer dependency on it.

https://codesandbox.io/s/material-demo-hrz3c?fontsize=14&hidenavigation=1&theme=dark

As of note, while this fixes the dependencies, you might likely get the following error:

Format string contains an unescaped latin alphabet character `n`

Sadly this is fault of date-fnslibrary 2.x release and at least according to this issue your best bet is to downgrade to 1.3.13

I can confirm, that downgrading to 1.3.13 did at least fix the issue on my sandbox

Upvotes: 3

Alonas
Alonas

Reputation: 463

You can use moment instead

In package.json

"@date-io/moment": "^1.3.11"

In the js file:

import MomentUtils from '@date-io/moment';

and

<MuiPickersUtilsProvider utils={MomentUtils}>
   <DateTimePicker {...props}/>
</MuiPickersUtilsProvider>

You can find more information here: https://material-ui-pickers.dev/getting-started/parsing

Upvotes: 0

Related Questions