For some reason, I cannot get the MUI X Date Picker 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 (;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: /

For some reason, I cannot get the MUI X Date Picker 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./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
• reactjs
• material-ui
• mui-x-date-picker

Share Improve this question Follow edited Mar 28 at 11:21 Olivier Tassinari 8,69166 gold badges2525 silver badges2828 bronze badges asked Jan 5, 2020 at 13:01 NewVigilanteNewVigilante 1,31911 gold badge1111 silver badges2424 bronze badges 2

• In the meantime, I also see they have updated their documentation. – NewVigilante Commented Jan 6, 2020 at 15:50
• 4 I had the same problem. After experiencing this, I can already tell that the road that lies ahead is long using this framework. – Mosia Thabo Commented Jan 7, 2020 at 1:55

Add a ment  | 

14 Answers 14

Sorted by: Reset to default 92

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

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

Downgrade your package to @date-io@^1.3.13

npm i @date-io/[email protected]

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

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

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

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]

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.

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.

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

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.

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.

No need to downgrade @date.io/date-fns, Just format Date properly as said in https://github./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>

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

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

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

I had a similar problem, to fix I added a format string to my app.module.ts imports like this:

NbDateFnsDateModule.forRoot({
  format: 'MMM dd, yyyy' // Errors without this line
}),