How to use material-ui-pickers KeyboardDatePicker with moment?
You can't use material UI picker v3 and @date-io/moment v2 together. You have to use the v1.x version of @date-io/moment.
Here is some more information about this topic:
https://material-ui-pickers.dev/getting-started/installation
Best regards
Nico
This is the fix provided by a colleague of mine. He used inputValue
and value
props of KeyboardDatePicker
. value
takes date object and inputValue
takes formatted date string. And also used rifmFormatter
prop as follows to fix the edit issue. I have also updated the sandbox
import React, { Fragment, useState } from "react";
import {
MuiPickersUtilsProvider,
KeyboardDatePicker
} from "@material-ui/pickers";
import MomentUtils from "@date-io/moment";
import moment from "moment";
function KeyboardDatePickerExample(props) {
const [selectedDate, setDate] = useState(moment());
const [inputValue, setInputValue] = useState(moment().format("YYYY-MM-DD"));
const onDateChange = (date, value) => {
setDate(date);
setInputValue(value);
};
const dateFormatter = str => {
return str;
};
return (
<Fragment>
<MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils}>
<KeyboardDatePicker
autoOk={true}
showTodayButton={true}
value={selectedDate}
format="YYYY-MM-DD"
inputValue={inputValue}
onChange={onDateChange}
rifmFormatter={dateFormatter}
/>
</MuiPickersUtilsProvider>
</Fragment>
);
}
export default KeyboardDatePickerExample;