CODEWITHSUNDEEP
reactjsmaterial-ui
Roster
Roster

Reputation: 1954

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

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

Upvotes: 5

Views: 23178

Answers (2)

Aniket Jagtap
Aniket Jagtap

Reputation: 31

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.")

Upvotes: 3

Dmitriy Kovalenko
Dmitriy Kovalenko

Reputation: 3624

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

Upvotes: 13

Related Questions