Provided you do not have the control marked required, the onChange should fire on clear, handing you an empty string.
We also need to handle that case properly. Testing the date for validity and rejecting invalid dates by setting it to null perhaps.
With that change, make sure formatDateAndTime correctly handles the case in which the date is null, and so returns an empty string.
<TextField
type="datetime-local"
value={formatDateAndTime(this.state.editedValue.startDateTime) }
onChange={(date: any) => {
const selectedDate = new Date(date.target.value);
const sanitizedDate = isNaN(selectedDate) ? null : selectedDate;
this.setState((prevState) => ({
editedValue: { ...prevState.editedValue, startDateTime: sanitizedDate }
}));
}}
/>
The issues is caused because of the required property in the component, I removed it and it started working fine. check this code codesandbox, try adding and removing required property and click on clear button