Is there a way to programmatically determine if an input date field is incomplete?

I’m stuck with the following question: how can I determine if an input date field is incompletely submitted? For example, if I send 12/09/aaaa as a value, the value actually sent is null, which is the same value I obtain if I send gg/mm/aaaa, i.e. the empty value. Is there a way to discriminate via JS between the two cases? (Actually, I’m using Vue.js but I think it’s not so important.)

Thanks in advance!

Answer

tl;dr: No, not natively

Problem

If you use the native HTML date input there is no way to differentiate between a partially filled state and a totally empty state because the native HTML date input must either be empty or have a valid date according to the spec:

4.10.5.1.7 Date state (type=date)

[…] User agents must not allow the user to set the value to a non-empty string that is not a valid date string. […]

The value attribute, if specified and not empty, must have a value that is a valid date string.

The value sanitization algorithm is as follows: If the value of the element is not a valid date string, then set it to the empty string instead.

– reference

This means, when the input is partially filled, no matter what form or input event is triggered (submit, change, etc) the value of the input will be an empty string.

Solution

You’ve got to build your own custom date input.