CODEWITHSUNDEEP
reactjsmaterial-ui
TCS
TCS

Reputation: 799

React - Material Date Picker Doesn't Work

The easiest thing on internet must be "date picker", but It's too hard to integrate to react.

My Code (some part of it):

...
import DateFnsUtils from '@date-io/date-fns';
import {
  DatePicker,
  MuiPickersUtilsProvider,
} from '@material-ui/pickers';
...

const [selectedDate, handleDateChange] = useState(new Date());
....

return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
..... (some html here)

<DatePicker value={selectedDate} onChange={handleDateChange} />
....(some html here)

And it returns that: index.js:423 Uncaught RangeError: Format string contains an unescaped latin alphabet character `n

Failed prop type: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.

index.js:1472 The above error occurred in the component:

Upvotes: 1

Views: 2330

Answers (1)

Aahaan Sachin
Aahaan Sachin

Reputation: 46

I know the answer to this problem.

I myself have faced this problem.

@date-io v2 has some bugs

so whenever you are installing something like @date-io/date-fns

Install version 1 for @date-io/date-fns

The exact problem that you are facing just run this -

npm i @date-io/[email protected]

Checkout this link

Also check this out

This links to material UI pickers page

On top they have commands for all the @date-io install commands

I hope this answers your question

Good luck!

Upvotes: 1

Related Questions