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

Downgrade your package to @date-io@^1.3.13

npm i @date-io/[email protected]

Answer 3

Just use momentJS: npm i @date-io/[email protected] 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/[email protected]
npm install @date-io/[email protected]
npm install [email protected]