Datepicker - RangeError: invalid time value

Question

Im losing my mind over this error.. tried every solution and nothing work. Im displaying a material-ui Datepicker calendar. it was working perfectly, until today. i dont know what happend, i didnt change nothing in the code, when its even me who write this.

RangeError: Invalid time value

here is the code:

import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';
import React, { useState } from "react";
import { DatePicker } from "@material-ui/pickers";
import {enUS} from 'date-fns/esm/locale'

const StaticDatePicker = () => {
const [date, changeDate] = useState(new Date());

return (
<>
<MuiPickersUtilsProvider locale={enUS} utils={DateFnsUtils}>
  <DatePicker
    autoOk
    orientation="landscape"
    variant="static"
    openTo="date"
    value={date}
    onChange={changeDate}

  />
  </MuiPickersUtilsProvider>
  </>
 );
};

export default StaticDatePicker;

the "new Date()" returning

Fri Aug 16 2019 23:56:25 GMT+0300

any suggestion?

Answer 1

Here is a working CodeSandbox: https://codesandbox.io/s/datepicker-nv95r

The only thing I changed was the locale import. It didn't work for me with /esm/ in the path, but both of the following worked:

import { enUS } from "date-fns/locale";

import enUS from "date-fns/locale/en-US";

Not sure if this related to your problem or just a difference between the CodeSandbox environment and how your environment is configured.