Pikaday: A friendly guide to front-end date pickers

After dealing with datepickers for (checks notes) two decades, my best advice is to use the damn input type text with a placeholder showing a format, then saving it as a string in whatever that ISO that makes sense is called.

Everything else is asking for endless trouble and pain with browsers, a11y, locales and what not. Also, may the God allmerciful save you from the cancer that custom components are, let whoever invented this wipe his ass with fiberglass insulation for the end of times.

Don't get fancy and you will not fall down 10 rabbit holes that datepickers are.

Agreed. This works way better than struggling with date pickers not working on mobile, finding where the year picker is etc etc

That’s probably fine for dates that people have memorized, like their birthday. But it’s certainly not great for something like flight search, where I might know I want to leave in early April on a Friday or Saturday. For that I really need to see a calendar not only to input a date, but to visualize the possible dates for my trip.

Input type date shows a calendar: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

Yes, but that is not what was recommended here above

"my best advice is to use the damn input type text"

This should be called bad advice about dates every developer should avoid.

ISO 8601 does NOT work with future dates. It does not work with cross border appointment booking.

ISO 8601 only works for dates and times that have already happened.

I have 20 years, have worked with apps that relied on future and past dates, have used date pickers since 2005 and would still hesitate to give advice about what is an incredibly complex problem that entirely depends on your use case.

No matter what placeholder text you put, you can not trust that 3-9-1980 is the same date for your user as it is for you.

Tell us more. Please.

> ISO 8601 does NOT work with future dates. It does not work with cross border appointment booking.

Why is this the case? Is it some time zone shenanigans?

15 years a front-end dev, 5 years as accessibility engineer.

Every time someone brings up a date picker I just wanna pull the pin on my parachute and jump out the window. 100% agree, its one of the hardest components to get right for so many different reasons. Like you mentioned in cross border booking, just in Canada they have three or four different ways to write a date. I worked for a healthcare company and just getting a consensus on that alone was a 8 month process of back and forth.

I feel your pain man, I really do.

And what format does work for future dates?

Or do you mean that ISO 8601 doesn't work but RFC 3339 does work or some other updated ISO/RFC format?

Timezones change, more frequently than you realize. Some countries even used to change when summer time started regularly. It's got better than it used to be afaik.

Also you need to take into account where the user is going to be. With future dates, time is relative. So at the very least you often need the time + the timezone of the location.

Book me a table at 8, means book me a table in Berlin time at 8, not in San Francisco time at 8.

Same with displaying future dates, you need the context of where.

This is nothing to do with ISO 8601 though.

You can represent time zones with that format. So long as you have a source time zone, target time zone and tzdata you can convert any time accounting for all the particularities of any particular zone.

This has nothing to with the dates being in the future and only with convention and labeling the field correctly.

And in the table example you don't need the "where", because it's obviously in the restaurant's timezone.

ISO 8601 timezone only allows an offset. You can't encode "04:00 in Cairo on 13th November 2036" as there's no way to know what UTC offset Cairo will have in October 31st 2036.

> 2036-11-13 04:00:00 Africa/Cairo

Is fine

> 2036-11-13 04:00:00 +0200

Is not, as the rules around moving from +3 to +2 may well have changed by them.

That’s got literally nothing to do with ISO 8601 though. Times are just hard and there’s no way to know the future with any kind of certainty. In this case there’s no way of knowing whether Egypt will by 2036 have changed their timezone or added or eliminated DST. Nothing to do with ISO 8601, just the world is uncertain.

Take the UK for another example. The daylight savings dates are actually set by act of parliament. Although they always have fallen in the pattern that everyone knows, for dates in future years beyond the ones they have already set, they could hypothetically (if you want to be literal-minded about it) change the law to make DST happen on absolutely any day of the year or not at all.

Are you scheduling a restaurant reservation for 2036? Will it change from 09 to 10 in the morning depending on DST?

Sure, we cant know what unix date it resolves to, but it doesn't matter, because future dates are more of a contract intentionally bound to context that is subject to change.

Which is why locale settings exist and are important to get right before asking for user input

ISO 8601 only allows timezones as offsets, not as locations.

If it allowed "Africa/Cairo" instead of "+0200" that would be fine.

> they could hypothetically (if you want to be literal-minded about it) change the law to make DST happen on absolutely any day of the year or not at all.

That's the whole point - that's why you store future date/times with the location, not the offset, and not in UTC

There's an extension to ISO8601 that fixes this and is starting to become supported in libraries:

    2019-12-23T12:00:00-02:00[America/Sao_Paulo]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

If I want to book an appointment for April 12th 2027 at 2:00pm, then that's the time I want.

If my locale decides in 2026 to opt out of daylight savings time and not use it anymore -- it does not mean my appointment is now at 1:00pm instead. My appointment is still at April 12th 2027 at 2:00pm. But if I had saved it as a prediction of a UTC time in ISO 8601, then the system would think my appointment was now at 1:00pm.

This is why it has to do with dates being in the future. A past date-time can be converted to a UTC time represneted in ISO8601 that will not ever change (if it was converted properly).

I'm not sure where you got restaurants from -- you are the first person in this thread to mention restaurants? That is one use case for storing dates and times in the future, but certainly not the only one! There are of course some where the time zone is not "obvious". You realize there is software that's used for things other than restaurant orders and reservations, right? (Also I can imagine a restaurant that's a mobile food truck in an area near a timezone border...)

You speak very authoritatively and combatively about something I think you may not be on the same page about.

The fact that ISO8601 does not store time zones (only fixed UTC offsets, which is not the same thing) obviously has something to do with ISO8601. I'm not sure what you're going on about?