dates.png

Design challenge: Date ranges

Simple to start

Date ranges are one of those simple things that get more complicated the more you dig into them. Let’s start simple:

1:00pm, April 30th, 2024 — 5:00pm, April 30th, 2024

That’s a bit of a mouthful. There’s no need to repeat everything.

1:00pm — 5:00pm, April 30th, 2024

And maybe we can make it easier to read by omitting the minutes when they are zero.

1pm — 5pm, April 30th, 2024

Do we need to repeat “pm”?

1 — 5pm, April 30th, 2024

Good. That’s concise and readable.

Rules

We already have some rules:

  • Put the times together if it’s all on one day
  • Omit the minutes if they are zero
  • Only mention the meridian once if it is the same for both the start and end time

What if it spans two days?

1pm, April 29th, 2024 — 5pm, April 30th, 2024

We don’t need to repeat "April" and "2024":

1pm, 29th — 5pm, April 30th, 2024

More rules

  • Only mention the year once if it’s the same for both
  • Same for month

And we cope with exceptions:

1pm, 31st December, 2024 — 5pm, 1st January, 2025

OK, we now have a system in place that copes with any date range but we need to consider the 24-hour clock which many locales prefer. We no longer have meridians but meridians do give us a clue about which part of the text relates to the time. For example, if we switch to 24-hour clock and have:

13 — 17, April 30th, 2024

It’s a bit confusing. Is that the 13th, 17th or 30th of April? We can add an “h” to make it clearer:

13h — 17h, April 30th, 2024

Or always mention the minutes?

13:00 — 17:00, April 30th, 2024

More rules

  • Add a suffix if using the 24-hour clock and omitting the minutes

What about translations for locales? For instance, let’s consider German:

13 — 17 Uhr, 1. Januar 2024

The day-month-year order has changed, the day takes a “.” suffix, we have the German word for January and we use the “Uhr” to reference the “hour” instead of "h".

More rules

  • Change everything if we're using a different locale
  • Make things concise but readable
  • Display information correctly no matter what language you prefer

Conclusion

Here at Tito, we’ve been wrangling date ranges for something like 12 years and we’re still trying to get it right.