Search code examples
datepickerlocalizationmaterial-uilocale

I can't get Material UI DatePicker to correctly parse UK dates


As I understand it, if I want the MUI DatePicker to correctly parse UK dates (day first, then month), I must pass the en-GB locale to MuiPickersUtilsProvider. However, my attempts to do this are failing.

The code below..

import React from "react";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
import DatePicker from "./DatePicker2";
import enGB from "date-fns/locale/en-GB";

const App = () => (
  <MuiPickersUtilsProvider utils={DateFnsUtils} locale={enGB}>
    <DatePicker value={"2/4/2020"} />
  </MuiPickersUtilsProvider>
);

export default App;

..will display the date "4 Feb 2020" when it should be displaying "2 Apr 2020".

What am I doing wrong?


Solution

  • Here is an example gist with locking pickers timezone to UTC. You can do exactly same with any other timezone https://gist.github.com/sibelius/37e7780c2a4a85ba1fea0b5cff196565