[pickers] Report partially-filled date via onError

[ianparkinson]

Summary

With MUI X v8, DatePicker now reports partially filled dates as null instead of as an invalid date object, as documented at https://mui.com/x/migration/migration-pickers-v7/#treat-partially-filled-date-as-null-in-onchange.

As far as I can tell, there's now no good way to distinguish between an empty DatePicker and a partially-filled one. If the date field is meant to be optional, then a UI cannot reject incomplete input while accepting an absent date.

Could partial input be reported via onError, either as invalidDate or some new error name?

Examples

Using the example at https://mui.com/x/react-date-pickers/validation/#show-the-error - deleting the year field causes the reported error to go away.

Motivation

Show a warning to a user who has tried to submit a form having only partially entered a date, in situations which otherwise allow the date to be omitted entirely.

Search keywords: partial date

[flaviendelangle]

Hi,

Thanks for your feedback.
We believe the new behavior is a lot more consistent because using invalid date to know that the date was partially filled felt brittle (almost like relying on an implementation detail).

However, I fully agree that if this information is needed, we should provide it in a better shape.
The onChange has a 2nd parameter that currently contains the validation status of the new value. If we added a property like isPartiallyFilled?: boolean or something similar, would that solve your problem?

[ianparkinson]

Thanks for the quick response! Yes, I agree that null is a better choice than an invalid date object (which rather assumes that the third-party date library even supports such a concept).

A new property on the context object would work. But that would mean firing an onChange event when the context changes, even if the value doesn't - which seems like a surprising behaviour to me?

[flaviendelangle]

You are right... this might not been as simple as expected.
Another solution is to add an onSectionValueChange callback that receives the list of sections and there value and let you check if some are filled but not all. But it's not great...

For the onError, I agree that it's probably the cleanest option. I would require more change because our validation process doesn't handle this kind of scenario, but I'll see what is doable.

[morzel85]

This change from Invalid Date to null for inputs which are not valid dates (for example when user removes date segment leading to partial placeholder display like "15/DD/2025") is a very significant change.

It is crucial to block users progressing through forms if they have incomplete date. When an input is not mandatory, validation is not blocking if instead of Invalid Date MUI returns null. This often happens with inputs such as DatePicker that have complex placeholder behavior and is hard to spot for users.

Please provide convenient way to detect such invalid input.