Cannot get material-ui datepicker to work

问题

For some reason, I cannot get the material-ui datepicker to work. Every time the datepicker is rendered in React, the following error is thrown:

RangeError: Format string contains an unescaped latin alphabet character n

I have created a stackblitz with just the datepicker (https://stackblitz.com/edit/react-6ma6xd?embed=1&file=index.js) and even there the error shows up. What am I doing wrong? I think I followed all the instructions from the installation guide.

Link to the material-ui/pickers: https://material-ui-pickers.dev/

回答1:

I had the same problem, found this in the github issues:

https://github.com/mui-org/material-ui-pickers/issues/1440 so i installed "@date-io/date-fns": "^1.3.13" and got it working

回答2:

Downgrade your package to @date-io@^1.3.13

npm i @date-io/date-fns@1.3.13

回答3:

Just use momentJS: npm i @date-io/moment@1.x moment

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

function App() {
  return (
    <MuiPickersUtilsProvider utils={MomentUtils}>

回答4:

Looks like the material-ui-pickers example is using the following dependency versions (which are different from yours):

"@date-io/date-fns": "1.0.1",
"material-ui-pickers": "2.1.1",

In your example, you are using a newer version of @date-io with a deprecated version of material-ui-pickers:

"@date-io/date-fns": "2.0.1",
"@material-ui/pickers": "3.2.8",

You can (1) set your versions to match the example or (2) use the latest material-ui-pickers version and perform the date formatting using a custom function instead of DateFnsUtils.

Hope this helps.

回答5:

you need to install

npm i @date-io/date-fns@1.x date-fns

from offical site . https://material-ui-pickers.dev/getting-started/installation and follow their instructions.

回答6:

I tried the answers above it didn't work but they gave me clue to the solution, you'll have to make a full downgrade if the previous answers don't work for you

npm install @material-ui/pickers@3.2.8
npm install @date-io/date-fns@1.3.13
npm install date-fns@2.8.1

回答7:

it's due to material ui pickers v3 conflict with @date-io, can visit official site

Important: For material-ui-pickers v3 use v1.x version of @date-io adapters.

回答8:

For me the only thing that was creating this issue was the order of import statement.Make sure you:

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

i.e

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

来源：https://stackoverflow.com/questions/59600125/cannot-get-material-ui-datepicker-to-work

标签

javascript

reactjs

material-ui