
Designing the Perfect Date and Time Picker - pmontra
https://www.smashingmagazine.com/2017/07/designing-perfect-date-time-picker/
======
jscholes
I'm a screen reader user and, hands down, date pickers are the controls which
cause the most frustration for me on the web because of their almost universal
lack of accessibility. In some cases, far too many to be considered
reasonable, I've been unable to complete a booking or similar process because
I simply can't choose a date. But yet, in an article about creating the
perfect control, accessibility is barely even mentioned, certainly not in any
menaingful enough way to actually create an accessible one.

> Making one of those date pickers accessible isn’t trivial, because date
> selection should be keyboard-accessible and you would need to toggle between
> open and collapsed states. You can find an overview of accessible date
> pickers. Also, consider looking into Whatsock’s examples.

Great. An important topic reduced into a paragraph which sounds like it was
written during the planning stage of the article and never expanded on.

~~~
tabtab
How would you prefer such a control handle both textual input of date, but
also support a visual "pop-up" calendar widget for those who want it? Is the
main problem the lack of standard conventions and consistency for the
selecting input method, or is it having no known textual input option?

Our organization is interested in improving our accessibility without
sacrificing the convenience of modern GUI widgets, and finding it really
tricky and expensive to get both. We are not made of cash, and the problem
frustrates everyone.

~~~
taeric
I'm fond of a little icon that I have to click to get the popup. If I just
mouse into a field, I don't like it to auto expand anything around it.

~~~
TomK32
Firefox does that automatically these days if you set the input's type to
date.

~~~
tabtab
But if you have to target multiple browser brands, that's probably not a
practical solution. A JavaScript library is more likely to be consistent
across browsers. I don't like relying on 3rd party JavaScript gizmos, but it
may be the least of evils.

------
Traubenfuchs
Consider using basic/native HTML date and time pickers which are mostly
supported by all major browsers besides desktop Safari instead of
overengineering.

[https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/in...](https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/input/date)

[https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/in...](https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/input/time)

[https://caniuse.com/#search=time%20input](https://caniuse.com/#search=time%20input)

~~~
styfle
How can Safari go this long without implementing this part of the HTML5
standard? Is there even a ticket to implement?

~~~
Traubenfuchs
That's a good question. Why is the company that ranks 4. place in the Fortune
500 index unable to implement basic, boring but useful HTML 5 features in
their desktop browser that were implemented by Opera nearly 10 years ago,
while at the same time implementing them on their mobile browser?

It looks like they just gave up:

[https://bugs.webkit.org/show_bug.cgi?id=78746](https://bugs.webkit.org/show_bug.cgi?id=78746)

[https://bugs.webkit.org/show_bug.cgi?id=88026](https://bugs.webkit.org/show_bug.cgi?id=88026)

~~~
Sharlin
Are they unable? Of course not. Is desktop Safari in any way a priority to
them? Not really, at this point.

------
pmontra
Am I the only one that thinks that the new Android time picker is way worse
than the old one? Selecting the time by finding hours and minutes on two dials
is much slower than pushing 4 numbers on a number pad, because I know the 4
digits, I know a numberpad but my brain has to do the extra work of finding
the hours on a not completely familiar double dial.

New: [https://i.imgur.com/8a4R16O.jpg?1](https://i.imgur.com/8a4R16O.jpg?1)

Old: can't find a picture, it was four digits HH:MM above a number pad.

------
gregable
I've been trying to figure out a good way to create a date picker for a user's
birthdate, and coming up short.

Most date pickers assume that the date is in the near future and that the "day
of week" context (ie: tuesday) is useful to the user is selecting the date.

Birthdays are the opposite. They are typically decades in the past, the user
doesn't know or care what day of the week they are, and the user knows the
numerical date by heart.

The only things I've come up with are:

1) Text entry that attempts to accept different formats and displays the
formatted parse of the format next to it. Decent on desktop, text entry on
mobile is poor.

2) Big array of Years / Month / Day buttons. The possible range of years is
limited (nobody alive was born in year 1200) to a little over 100, so this
does scale. User simply needs to tap on the correct button 3 times, which is
nice, but the picker takes up sooo much visual space.

~~~
brlewis
Three inputs type="number"?

[https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ALeBbKIANCAGYCWMY...](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ALeBbKIANCAGYCWMYaA2qAHYCGuEamO+RIsA9nYn6wA88BgCMYAPgA6dAASzhAJ2lz5C+EgkBNCA0WpBAeg0q16zYLJ0ADgFd4s+AE9rEALxSQdW7lERFnrK4Vh4gAIwAnAAMUYG4DAAeoQBMUWEAHIGGEkYmMvK5yvnqRaoFJgCyvPBYBsaaxeUWVnYOzq6h3r7+cSGeYXGJoWHJWTn1pgrGpeUzasKaACIMTnV5ZeY5LfaOLu6eXX4BIEF94YNJngDMAyfZuQ2qhSq5YpIynJAwCGS8VOhhKKoMJhEAAX0I9CYLHQGAAVlRiDw+BABOhwZCvNDWBhYGBEVxqqj4KxwQBdMFAA)

------
a_r_8
A consideration if you're making an accessible website is keyboard navigation.
Having numerical inputs eliminates this, however. Still a good read, I have
been thinking a lot about date pickers in the last year.

~~~
jscholes
> A consideration if you're making an accessible website

When would you not be?

~~~
Sharlin
Unfortunately, almost always. Approximately zero percent of websites take
accessibility into account in any real way.

------
hotcrossbunny
A sitter for the kids, good restaurant, fine food and a glass of wine with
my...er.. time picker. Oh wait. Damn punctuation!

------
mesozoic
95% of the time letting the user input a date string and validating it is
best.

~~~
wudu
How would you validate / resolve 02-03-15? Is it Mar 2nd or Feb 3rd? Date
picker solves this.

