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/

In the meantime, I also see they have updated their documentation. — NewVigilante, Jan 06 '20 at 15:50
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, Jan 07 '20 at 01:55

Michaud · Accepted Answer · 2020-05-28T21:32:02.193

91

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

edited May 28 '20 at 21:32

answered Jan 06 '20 at 01:04

Michaud

1,098
8
12

someone just wrote a different text from mine which changed, not the information but definitly the tone. So I'm changing it back. If you don't like the answer's wording, please maybe write a different answer for others to upvote – Michaud May 28 '20 at 21:36
9

It is important to bear in mind that it is required to close and restart the server after downgrading the module, especially if you are using Windows. – Luis Febro May 31 '20 at 23:05
Downgrading to @date-io/date-fns@1.x worked for me – Yogesh Bhatt Apr 01 '21 at 04:02
Oh man, @LuisFebro you cannot imagine how much time you saved me... Thanks a lot. – ttous Jul 22 '21 at 12:33

Sultan Aslam · Answer 2 · 2020-01-06T14:55:28.827

51

Downgrade your package to @date-io@^1.3.13

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

edited Jan 06 '20 at 14:55

answered Jan 06 '20 at 14:50

Sultan Aslam

5,600
2
38
44

3

The [installation instructions](https://material-ui-pickers.dev/getting-started/installation#peer-library) now explain exactly what to install. – Dan Dascalescu May 24 '20 at 08:47
@DanDascalescu Your link is dead – Scott Baker Apr 14 '23 at 20:02

Gleb Dolzikov · Answer 3 · 2020-03-27T06:43:26.903

12

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

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

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

edited Mar 27 '20 at 06:43

answered Mar 27 '20 at 06:30

Gleb Dolzikov

776
8
13

4

"Just" use moment? You might want to check [this](https://github.com/moment/moment/issues/3376). – Dan Dascalescu May 24 '20 at 08:45
1

Replacing date-fns with moment has fixed the issue for me. – Zeeshan Elahi Jul 08 '20 at 00:36

score 11 · Answer 4 · edited Feb 12 '20 at 00:53

11

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

edited Feb 12 '20 at 00:53

Bhargav Rao

50,140
28
121
140

answered Feb 11 '20 at 20:50

Chukwuemeka Maduekwe

6,687
5
44
67

score 4 · Answer 5 · answered Jan 05 '20 at 13:31

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.

I think I am using the latest packages. The ones you send as a suggestion seem to be the ones who are deprecated, which I would rather not use in production. All the packages I used are from running the commands in the installation guide (https://material-ui-pickers.dev/getting-started/installation) — NewVigilante, Jan 05 '20 at 13:48

score 4 · Answer 6 · answered Feb 06 '20 at 05:08

4

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.

answered Feb 06 '20 at 05:08

Shahnad S

983
10
17

This is why posting links is frowned upon. Your link is dead. – Scott Baker Apr 14 '23 at 20:33

score 3 · Answer 7 · answered May 31 '20 at 13:55

3

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

answered May 31 '20 at 13:55

kapil pandey

1,853
1
13
26

score 2 · Answer 8 · answered Jan 27 '20 at 06:30

2

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.

answered Jan 27 '20 at 06:30

Muhammad Muzamil

1,013
2
18
25

score 2 · Answer 9 · answered Jul 29 '21 at 03:54

2

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.

answered Jul 29 '21 at 03:54

Dawood Ahmad

476
4
13

score 1 · Answer 10 · answered Oct 13 '20 at 05:06

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>

score 1 · Answer 11 · answered Feb 08 '21 at 10:37

1

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

answered Feb 08 '21 at 10:37

Stian

11
1

score 0 · Answer 12 · answered Jun 20 '21 at 15:02

0

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

answered Jun 20 '21 at 15:02

Kashif Nazar

20,775
5
29
46

score 0 · Answer 13 · answered Mar 27 '22 at 18:39

0

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

answered Mar 27 '22 at 18:39

Moritz Roessler

8,542
26
51

Cannot get material-ui datepicker to work

13 Answers13

React

Linked