Best UX for incomplete date

Question

Situation: The user entered an invalid or incomplete date into a date picker. For example, the user entered 01/01 then exited the field.

Question: How should the date picker behave?

PrimeNG controls clear the data from the control if it is incomplete.

Angular Material controls make a best-effort attempt to select a date. In this example, Material will have a date 1/1/2001.

NGX Bootstrap selects the month and day entered and completes the date with the current year.

Another option would be to show the control in an error state with a message stating the date is invalid.

User persona: Betty works for a work placement agency. She places workers in temporary jobs at a variety of employers. She enters dates in the recent past, present, and near future for contracts. She is also responsible for entering resume data into the system. This data could include dates far in the past.

Answer 1

For the contract dates that will be in the recent past, present, and near future, it makes sense to default to the current year. If a value is almost always going to be the same, you can save the user a (likely) keystroke and default to that value. (You might want to see if defaulting to January of the next year is a good idea when the user is in December.)

More open-ended pickers that can go far into the past, like the résumé entry, shouldn't use defaults. Start with an empty state. The system should let the user know immediately (after entering an incomplete date) that the date is incomplete, and prevent the user from submitting the form until it's complete. Clearing the date will force the user to start over, and that can be frustrating. Unless there is something sophisticated going on, the system wouldn't have enough information to provide a "best guess". An empty value is the best direction here.

Answer 2

Since your use case requires including dates from far in the past, show the control in an error state.

You can even specify which part of the value is missing, like so:

When the user inputs an incorrect value in the field, e.g.

01/01

Return

01/01/YYYY