date/time input min and max attribute are ignored

• Component: Forms
• Status: NEW ---

[Luke Warlow]

When using input type date, time or datetime-local the min and max attribute values are mostly ignored. Both the value when edited with keyboard arrows and the submitted form data ignore the attributes entirely. While the UI won't select past the max or min value, it doesn't give any indication of what they are, creating a poor user experience.

Examples can be found on the MDN pages for the respective input types: 
e.g. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

I've tested on macOS Big Sur 11.2,3, Safari Technology Preview Version 122.

[Aditya Keerthi]

Thanks for the report!

I agree that keyboard arrows should better respect the min/max attributes.

I also agree that the calendar UI should give an indication of the min/max dates. Note that the calendar is a standard system view, so the fix cannot be made in WebKit alone. I will look into what can be done here.

However, I don't understand exactly what you mean by "submitted form data ignores the attributes entirely". I've linked a test case below where the attributes are validated upon submission. Attempting to submit a date outside the min/max range will present a validation message, and :invalid CSS rules are applied as expected.

Test case: https://jsfiddle.net/8Ljh0npf/

[Luke Warlow]

I've just checked out your test case, and it does indeed work as expected.

I must have got the form data without actually doing the form submission step when testing it, sorry for that mistake.

[Radar WebKit Bug Importer]

<rdar://problem/75630469>

[Luke Warlow]

After some more recent testing this is also the case on iOS, at least for the date input. Being able to select an invalid value is very unintuitive.