'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/

Solution 1:^[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

Solution 2:^[2]

Downgrade your package to @date-io@^1.3.13

npm i @date-io/[email protected]

Solution 3:^[3]

Just use momentJS: npm i @date-io/[email protected] moment

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

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

Solution 4:^[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/[email protected]
npm install @date-io/[email protected]
npm install [email protected]

Solution 5:^[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.

Solution 6:^[6]

you need to install

npm i @date-io/[email protected] date-fns

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

Solution 7:^[7]

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

Solution 8:^[8]

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.

Solution 9:^[9]

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.

Solution 10:^[10]

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>

Solution 11:^[11]

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

Solution 12:^[12]

As suggested here, use v1.x version of @date-io adapters with material-ui-pickers v3.

Solution 13:^[13]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3
Solution 4	Bhargav Rao
Solution 5	Jeff Tsui
Solution 6	Shahnad
Solution 7	kapil pandey
Solution 8	Muhammad Muzamil
Solution 9	Dawood Ahmad
Solution 10	w0lf
Solution 11	Stian
Solution 12	Kashif Nazar
Solution 13	Moritz Roessler

'Cannot get material-ui datepicker to work

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]