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;