I'm a little disappointed that gov.uk has custom date inputs specified.
I think it's time for web sites to stop doing custom date inputs. Even Safari finally has a native date input.
The worst are the sites that make you enter a day from a drop-down menu.
Second-worst are the ones that are asking for your birth date as input, but the default drop-down for the year is the current year. As if a six-month-old baby is signing up for a car loan.
Third-worst are the ones that make you pick a day from a drop-down. Bad programmers do this because they're bad at input validation. Well, with your drop-downs I can enter February 31. So now you've got two problems.
I once saw a government web site that had you pick each number from the date input as a separate drop-down. Who builds these things?
But, they didn't test the native date inputs, just drop-down and text options. So my point stands for now.
At least they do research and document. Thanks for those links.
I build my web sites based on first- and third-party research, but work in an organization stuffed with managers who want our sites to look more like TikTok, because that's what they spend most of their time on, and think we don't look like a real company if we don't have pop-ups and garrish colors, and things flying around the screen. We're a healthcare company.
I had one manager tell me that the company's web site didn't look like a "real" web site because it didn't have lots of little placeholder spinners. Explaining that they're not needed because the page loads in under a second got me a look like when you're trying to explain temporal physics to a collie.
Safari on iOS has trouble with blank date inputs (when date is optional).
My workaround for reliable date entry UI was to have a <input type=text> for date entry, with a second <input type=date> to the right of the text but that styled as a square dropdown icon, with tabIndex=-1, and JavaScript code to sync the two inputs. That allowed typing in the date, and also allowed users to use the browser native date input entry without forcing users. That avoided problems with broken user agents (mobile or desktop or OS).
The gov.uk research lined to above seems to indicate this isn't unique to Safari. Hopefully all the browsers and input shims will figure this out soon.
It is bad. Day month year are separate inputs. No auto-jump to next input. Even if this was done for accessibility reasons, it is not accessible for many on the a11y spectrum.
Also, the component is half baked. How come one can input wrong input and there is no immediate error feedback? How come the error example still shows a validation error despite entering correct data?
> It is bad. Day month year are separate inputs. No auto-jump to next input. Even if this was done for accessibility reasons, it is not accessible for many on the a11y spectrum.
Auto-advancing is a non-standard behavior for input fields, it could easily be confusing for users who aren't expecting it. Behavior in auto-advancing fields can also be awkward when going back to edit values, or pasting. I also wouldn't be surprised if it was more difficult for a11y users with screen readers. Keep it simple.
> Also, the component is half baked. How come one can input wrong input and there is no immediate error feedback?
This is covered elsewhere under "Patterns / Validation" [0], they recommend delaying validation until the user attempts to move on to the next section or submit the form.
> How come the error example still shows a validation error despite entering correct data?
I'm not sure what you mean, both examples have clear explanations in the error message; the first example [1] indicates that the date must be in the past and the second [2] is missing the year.
The issue is that most native date input pickers use a calendar, which is not always useful for some situations. If I'm planning a vacation, picking start and end dates, sure that could be handy. But if I'm entering something like my birthday, how does the calendar help me? It doesn't really help me to know that I was born on a Tuesday. There is one specific correct answer that I know by heart, I'd rather input it directly than page back in time a few decades and find the right square to click on.
I think it's time for web sites to stop doing custom date inputs. Even Safari finally has a native date input.
The worst are the sites that make you enter a day from a drop-down menu.
Second-worst are the ones that are asking for your birth date as input, but the default drop-down for the year is the current year. As if a six-month-old baby is signing up for a car loan.
Third-worst are the ones that make you pick a day from a drop-down. Bad programmers do this because they're bad at input validation. Well, with your drop-downs I can enter February 31. So now you've got two problems.
I once saw a government web site that had you pick each number from the date input as a separate drop-down. Who builds these things?