3 ms·

What do date pickers in other browsers look like?

lucb1e 4y ago
The Android one always makes me chuckle when some obscure site decided to use it. It's so unexpected to get a big pop-up in an entirely different UI style as the rest of the website suddenly, and when I realize what monster I now have to fight, idk it's humorous to me. It also differs between versions but hasn't gotten better. I have gripes with Safari, but date pickers isn't one of the things only Safari struggles with. An image search for 'android date picker' brings up at least three different designs: https://i.stack.imgur.com/3DW4n.png https://i.stack.imgur.com/3DW4n.png https://i.stack.imgur.com/LLRmB.png https://i.stack.imgur.com/LLRmB.png https://i.stack.imgur.com/kJqln.png https://i.stack.imgur.com/kJqln.png
- culi 4y ago
  thanks for the screenshots It seems like the first screenshot is `type="time"` and the second and third are `type="date"`. But I don't know if those are native components or the browsers defaults. Would be useful information
- bioemerl 4y ago
  And I think all three of those are out of date, the Android 13 one is totally different as well.
  - lucb1e 4y ago
    Time to update the image search results! Sharing is caring ;)
    - bioemerl 4y ago
      I wish, I can get the screenshot but there's no easy way to get that on the internet
      - lucb1e 4y ago
        Try https://snipboard.io https://snipboard.io (iirc I found them via HN, https://news.ycombinator.com/item?id=4887660 https://news.ycombinator.com/item?id=4887660, used to be snag.gy which imo was a much nicer domain but oh well), I use that to paste-and-forget images that I don't care much about but want to be longer-lived than on dro.pm
        bioemerl 4y ago
        Here you go! https://snipboard.io/8fL9Kl.jpg https://snipboard.io/8fL9Kl.jpg That 2018 and the top left gives you a selection for all of the different years
- kalleboo 4y ago
  I just tested it in Google Chrome on the Android 10 device I have for testing and got yet another design https://i.imgur.com/4w8IvO8.png https://i.imgur.com/4w8IvO8.png
culi 4y ago
Do you not have other browsers installed? You can open it up yourself by opening this URL https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in... But yeah that's a good point. I'm on Firefox on Mac and it looks pretty much exactly the same. I don't really get why other browsers wouldn't be causing the same issues From the screenshots it seems like they're talking about users on a mobile device. iPhones only allow you to use WebKit, but I'd be curious to see what Android's date picker looks like I feel like they could've just saved themselves the headache by setting the default value to 1950 or something
- systoll 4y ago
  Chrome for Android’s picker is worse in every way I can think of: Video: https://imgur.com/a/W196T5f https://imgur.com/a/W196T5f iOS keeps the input on screen, so you can see the value in context. Android covers it up, and shows the value in a different format in the header. iOS shows the Month+Year inside the calendar, with a blue arrow beside it to indicate interactivity. It’s not a strong affordance, but it’s something. On Android, nothing gives any such affordance. Blindly tapping the month+year in the calendar does nothing. Blindly tapping the day or month on the header does nothing. The year looks similar to the day and month, only smaller, and slightly darker grey. But if you tap it, you can scroll through the years. There’s no way to scroll through months – the only option is to tap through them one at a time.
  - culi 4y ago
    Oh jeez, yeah that's bad. What Android version and browser are you on?
    - systoll 4y ago
      This is vanilla android 13 with chrome 108. (IE – the newest ones) Firefox and Samsung Browser are basically the same thing with different colour schemes. Samsung managed to make the year seem even less tappable: https://imgur.com/a/2q4CiXk https://imgur.com/a/2q4CiXk

The Android one always makes me chuckle when some obscure site decided to use it. It's so unexpected to get a big pop-up in an entirely different UI style as the rest of the website suddenly, and when I realize what monster I now have to fight, idk it's humorous to me. It also differs between versions but hasn't gotten better. I have gripes with Safari, but date pickers isn't one of the things only Safari struggles with. An image search for 'android date picker' brings up at least three different designs: https://i.stack.imgur.com/3DW4n.png https://i.stack.imgur.com/3DW4n.png https://i.stack.imgur.com/LLRmB.png https://i.stack.imgur.com/LLRmB.png https://i.stack.imgur.com/kJqln.png https://i.stack.imgur.com/kJqln.png

culi 4y ago
thanks for the screenshots It seems like the first screenshot is `type="time"` and the second and third are `type="date"`. But I don't know if those are native components or the browsers defaults. Would be useful information
bioemerl 4y ago
And I think all three of those are out of date, the Android 13 one is totally different as well.
- lucb1e 4y ago
  Time to update the image search results! Sharing is caring ;)
  - bioemerl 4y ago
    I wish, I can get the screenshot but there's no easy way to get that on the internet
    - lucb1e 4y ago
      Try https://snipboard.io https://snipboard.io (iirc I found them via HN, https://news.ycombinator.com/item?id=4887660 https://news.ycombinator.com/item?id=4887660, used to be snag.gy which imo was a much nicer domain but oh well), I use that to paste-and-forget images that I don't care much about but want to be longer-lived than on dro.pm
      - bioemerl 4y ago
        Here you go! https://snipboard.io/8fL9Kl.jpg https://snipboard.io/8fL9Kl.jpg That 2018 and the top left gives you a selection for all of the different years
kalleboo 4y ago
I just tested it in Google Chrome on the Android 10 device I have for testing and got yet another design https://i.imgur.com/4w8IvO8.png https://i.imgur.com/4w8IvO8.png

culi 4y ago

Do you not have other browsers installed? You can open it up yourself by opening this URL https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in... But yeah that's a good point. I'm on Firefox on Mac and it looks pretty much exactly the same. I don't really get why other browsers wouldn't be causing the same issues From the screenshots it seems like they're talking about users on a mobile device. iPhones only allow you to use WebKit, but I'd be curious to see what Android's date picker looks like I feel like they could've just saved themselves the headache by setting the default value to 1950 or something

systoll 4y ago
Chrome for Android’s picker is worse in every way I can think of: Video: https://imgur.com/a/W196T5f https://imgur.com/a/W196T5f iOS keeps the input on screen, so you can see the value in context. Android covers it up, and shows the value in a different format in the header. iOS shows the Month+Year inside the calendar, with a blue arrow beside it to indicate interactivity. It’s not a strong affordance, but it’s something. On Android, nothing gives any such affordance. Blindly tapping the month+year in the calendar does nothing. Blindly tapping the day or month on the header does nothing. The year looks similar to the day and month, only smaller, and slightly darker grey. But if you tap it, you can scroll through the years. There’s no way to scroll through months – the only option is to tap through them one at a time.
- culi 4y ago
  Oh jeez, yeah that's bad. What Android version and browser are you on?
  - systoll 4y ago
    This is vanilla android 13 with chrome 108. (IE – the newest ones) Firefox and Samsung Browser are basically the same thing with different colour schemes. Samsung managed to make the year seem even less tappable: https://imgur.com/a/2q4CiXk https://imgur.com/a/2q4CiXk