| Summary: | input[type=date] and input[type=time] empty value UIs are confusing | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Brandon Kelly <brandon.kelly> | ||||
| Component: | New Bugs | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | NEW --- | ||||||
| Severity: | Normal | CC: | akeerthi, andrew, webkit-bug-importer | ||||
| Priority: | P2 | Keywords: | InRadar | ||||
| Version: | Safari 15 | ||||||
| Hardware: | All | ||||||
| OS: | macOS 12 | ||||||
| Attachments: |
|
||||||
We have just encountered this in cross-browser testing and were very surprised to see Safari behave this way. In our case we have an input prompting for an optional expiry date for a record. On other browsers, the empty input element is visibly "empty". On Safari, the user has the impression that the field has defaulted to today's date, and there is no way for them to remove this value. This UX is so confusing that unfortunately we are probably going to have to revert to a javascript-based date field instead of using input[type=date] which is obviously not ideal for anyone. |
Created attachment 444434 [details] Empty date and time inputs on Safari, Firefox, and Edge Safari displays `date` and `time` inputs with empty values in a confusing manner, with “placeholder” example values that aren’t easily differentiable from actual values. Both Firefox and Edge show placeholder values that are easily identifiable as placeholders: `mm/dd/yyyy` for `date` inputs`; `--:-- --` for `time` inputs (see attached screenshots). Safari should either follow suit with those browsers, or display no input placeholder at all, as Safari on iOS does.