Unable to use material-ui-pickers in React js web application

Question

I am trying to implement Material-ui-picker in react application .

Intergratied code from this below link

trying to implement complimentary design section

I used the code from the docs in seperate file and installed all the packages but getting Module not found: Error: Can't resolve 'date-fns/format' Then i tried to import the date-fns link from node-modules folder path like this import DateFnsUtils from '../../../../node_modules/date-fns/form' then getting below error .

Does anyone successfully integrated material-ui-pickers .. Please suggest

Answer 1

Refer the official documentation

You need install and pass utils. Firstly install utils for your library:

npm install date-fns @date-io/date-fns

Then pass them to the utils provider

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

function App() {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker value={selectedDate} onChange={handleDateChange} />
    </MuiPickersUtilsProvider>
  );
}

Here is sandbox to play aroung :)