"Tomorrow" or "in 2 days"? A timezone-safe 'time until' label with Intl.RelativeTimeFormat
Every countdown UI needs a short, friendly label: in 45 minutes , tomorrow , in 3 weeks , za 5 miesięcy . Modern JavaScript has a built-in for the wording, Intl.RelativeTimeFormat , so you no longer need a date library for it. But the API only formats a number and a unit that you pass in. Picking that number is where countdowns go wrong. Here's the bug that pushed me to write this. It's 23:30 on…
A JavaScript Countdown Helper for Accurate Time Labels
Countdown UIs require friendly labels like "in 45 minutes" or "tomorrow." In modern JavaScript, you can use Intl.RelativeTimeFormat to handle the wording. However, picking the right number can be tricky. For instance, at 23:30 on December 24 in Warsaw, the event at midnight on December 26 is in 2 days according to local time, while plain math would say it's 1 day away.
This article presents a small helper that accurately formats time labels, works in any locale, and is tested across multiple time zones. The helper uses Intl.RelativeTimeFormat for wording and handles numeric auto formatting, pluralisation, word order, and grammatical case for supported locales.
The challenging part is determining the correct number to use. The common approach is to calculate the number of 24-hour blocks between the target time and the current time, but this has two issues: it counts 24-hour blocks instead of calendar days, and it ignores the viewer's midnight. To fix this, both instants should be converted to calendar dates in the viewer's time zone, and then the dates should be subtracted.
First, a day key in a given time zone is created using Intl.DateTimeFormat. This function takes a date and timeZone and returns a YYYY-MM-DD string representing the calendar date. For example, dayKey(new Date('2026-12-24T22:30:00Z'), 'Pacific/Auckland') returns '2026-12-25' because it's already Christmas morning in Auckland.
Next, the daysBetweenKeys function subtracts two YYYY-MM-DD strings to calculate the number of days between them. It splits the keys, maps them to numbers, and uses Date.UTC to create UTC midnights for subtraction. This ensures that every day is exactly 86,400,000 ms, regardless of daylight saving time changes.
Finally, the timeUntil helper uses clock time for events less than a day away and calendar days for everything else. It switches to weeks, months, and years as the distance grows. This approach ensures accurate time labels for users in any locale and timezone.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
