Cannot get material-ui datepicker to work

Javascript Problem Overview

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/

Javascript Solutions

Solution 1 - Javascript

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 - Javascript

Downgrade your package to @date-io@^1.3.13

npm i @date-io/[email protected]

Solution 3 - Javascript

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

import MomentUtils from '@date-io/moment';
 
function App() {
  return (
    <MuiPickersUtilsProvider utils={MomentUtils}>

Solution 4 - Javascript

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

Solution 5 - Javascript

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 - Javascript

you need to install

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

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

Solution 7 - Javascript

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 - Javascript

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 - Javascript

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 - Javascript

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 - Javascript

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 - Javascript

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

Solution 13 - Javascript

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

Content Type	Original Author	Original Content on Stackoverflow
Question	NewVigilante	View Question on Stackoverflow
Solution 1 - Javascript	Michaud	View Answer on Stackoverflow
Solution 2 - Javascript	Sultan Aslam	View Answer on Stackoverflow
Solution 3 - Javascript	Gleb Dolzikov	View Answer on Stackoverflow
Solution 4 - Javascript	ChukwuEmeka	View Answer on Stackoverflow
Solution 5 - Javascript	Jeff Tsui	View Answer on Stackoverflow
Solution 6 - Javascript	Shahnad	View Answer on Stackoverflow
Solution 7 - Javascript	kapil pandey	View Answer on Stackoverflow
Solution 8 - Javascript	Muhammad Muzamil	View Answer on Stackoverflow
Solution 9 - Javascript	Dawood Ahmad	View Answer on Stackoverflow
Solution 10 - Javascript	w0lf	View Answer on Stackoverflow
Solution 11 - Javascript	Stian	View Answer on Stackoverflow
Solution 12 - Javascript	Kashif Nazar	View Answer on Stackoverflow
Solution 13 - Javascript	Moritz Roessler	View Answer on Stackoverflow