As soon as you start typing inside the DatePicker component, the validation is triggered.

How does one trigger validation on blur instead of onInputChange when using

@material-ui/pickers meant for material-ui v4

Passing the value to the blur function should work and omitting on change, but as soon as you remove the onChange event the code breaks.

Example

export default function MaterialUIPickers() {

  const [selectedDate, setSelectedDate] = React.useState();



  const handleDateChange = (date) => {

    setSelectedDate(date);

  };



  const handleBlur = (e) => {

    setSelectedDate(e.target.value);

  };



  return (

    <MuiPickersUtilsProvider utils={DateFnsUtils}>

      <KeyboardDatePicker

        id="date-picker-dialog"

        format="MM/dd/yyyy"

        value={selectedDate}

        onChange={handleDateChange}

        onBlur={handleBlur}

      />

    </MuiPickersUtilsProvider>

  );

}

Muiv4 documentation

Stackblitz example