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

4
votes

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

Intergratied code from this below link

trying to implement complimentary design section

enter image description here

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 . enter image description here

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

2
reactjsmaterial-ui

2 Answers

13
votes

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 :)

3
votes

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

npm i @date-io/[email protected] date-fns

or

npm i @date-io/[email protected] moment

or

npm i -s @date-io/[email protected] luxon

or

npm i -s @date-io/[email protected] dayjs

("The @date-io library release a new version v2 that's break this module.

Please update docs and require install only version 1.X from @date-io in the meantime.")