Cannot get material-ui datepicker to work

Question

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/

Answer 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

Answer 2

将您的包降级到@date-io@^1.3.13

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

Answer 3

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

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

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

Answer 4

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

Answer 5

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.

Answer 6

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.

Answer 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.

Answer 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' ;

ie

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

Answer 9

No need to downgrade @date.io/date-fns , Just format Date properly as said in https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md

      <MuiPickersUtilsProvider utils={DateFnsUtils}>
          <Grid item>
            <KeyboardDatePicker
              margin="normal"
              id="date-picker-dialog"
              label="Date picker dialog"
              views={['year', 'month', 'date']}
              value={selectedDate}
              format="dd/MM/yyyy"
              onChange={handleDateChange}
              KeyboardButtonProps={{
                'aria-label': 'change date',
              }}
            />
          </Grid>
        </MuiPickersUtilsProvider>

Answer 10

React

If you did like me and made a wrapper for this, you should check your other props. I got this error by mistakenly sending in Date.now() as the label prop, so it could have nothing to do with your format or @date.io/date-fns

Answer 11

that's because you installed @date-io@2.* you might see the error

Uncaught RangeError: Format string contains an unescaped latin alphabet character n

you have to downgrade to @date-io@^1.3.13.

Answer 12

正如这里所建议的，使用 v1.x 版本的 @date-io 适配器和 material-ui-pickers v3。

Answer 13

This happens as well if you pass undefined as format string. Make sure you don't accidentally pass undefined as format string.