I am trying to implement the Mui-Materials DatePicker in my React project.

I need a callback that fires when the user has entered a date and pressed Enter or lost focus. Once a date is accepted, I need to setState. But I don't want to do that before the date is fully entered. onChange fires every time a character is changed so the value is often an invalid or incorrect date.

onAccept matches my requirement, but it only works when the date is picked from the calendar and not when the date is entered in the field. I expect that is because DateField doesn't support onAccept.

Edit: Here is my implementation:

        <LocalizationProvider>
          <DatePicker
            value={state.selectedDate}
            onAccept={(value) => {
              console.log(value, 'onAccept');
              //setState('selectedDate', value ?? new Date());
            }}
            onChange={(value) => {
              console.log(value, 'onChange');
              //setState('selectedDate', value ?? new Date());
            }}
              slotProps={{
                textField: {
                  size: 'small',
                  sx: { width: '175px', ml: 1 },
                },
              }}
          />
        </LocalizationProvider>

My setStates are commented out. I am using the LocalizationProvider to provide visual validation feedback for when the date is invalid. That part is working, but onChange still attempts to set state to invalid values when a user is in the process of entering a date.

Here is what I get when changing the date to 2024:

Thu Mar 21 0002 17:10:26 GMT-0456 (Eastern Daylight Time) 'onChange'
Sat Mar 21 0020 17:10:26 GMT-0456 (Eastern Daylight Time) 'onChange'
Mar 21 0202 17:10:26 GMT-0456 (Eastern Daylight Time) 'onChange'
Thu Mar 21 2024 17:10:26 GMT-0400 (Eastern Daylight Time) 'onChange'

I would like to wait to setState until the date is fully entered and is valid.