"In 3 days" instead of a date: Intl.RelativeTimeFormat for a fixtures list

Luvuyo Ndamase — Sat, 10 Oct 2026 17:16:37 +0000

After sorting out time zones on my fixtures page, the next complaint came from my son, who said nobody reads dates anyway. He wanted "tomorrow" and "in 3 days", the way his phone shows messages. I had a look at how the Chippa fixtures and match schedule site shows them, and it uses proper dates, so I kept those and added a short relative label next to each one.

The browser already has this built in:

const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" });

rtf.format(1, "day");   // "tomorrow"
rtf.format(3, "day");   // "in 3 days"
rtf.format(-1, "day");  // "yesterday"

numeric: "auto" is the part that gives you "tomorrow" instead of "in 1 day". Without it everything comes out as a number, which reads a bit like a parcel tracking page.

Counting days in the right time zone

The tricky bit is not the formatting, it's working out how many days away a match is. Subtracting two timestamps and dividing by 86 400 000 gives you hours turned into fractions, and a Saturday 15:30 kick-off viewed on Thursday evening comes out as 1.8 days, which rounds to "tomorrow". Wrong.

What I do now is turn both dates into calendar days in the ground's time zone first, and only then subtract:

const dayKey = (date, timeZone) =>
  new Intl.DateTimeFormat("en-CA", {
    timeZone, year: "numeric", month: "2-digit", day: "2-digit"
  }).format(date); // "2026-10-18"

function daysUntil(kickoff, timeZone = "Africa/Johannesburg") {
  const a = new Date(dayKey(new Date(), timeZone));
  const b = new Date(dayKey(kickoff, timeZone));
  return Math.round((b - a) / 86_400_000);
}

const label = rtf.format(daysUntil(new Date("2026-10-18T13:30:00Z")), "day");

The "en-CA" locale is just a trick to get a YYYY-MM-DD string that new Date() parses as midnight UTC on both sides, so the difference is always a whole number of days.

When to stop being relative

Past about a week, "in 12 days" is less useful than the date itself, so the label only shows up for matches within 7 days. Anything further keeps the plain date from the first version. For results I show "yesterday" and "3 days ago" the same way, then fall back to the date.

It's about 20 lines in total. My son still says it should show the opponent's logo instead, but that's a different post.

Kick-off times that are right for everyone: Intl.DateTimeFormat instead of string maths

Luvuyo Ndamase — Fri, 09 Oct 2026 15:24:32 +0000

I keep a small fixtures page for a football club I follow, and for a long time the kick-off times were stored as plain strings like "15:30". That works until someone in another country opens the page, or until the data source starts sending times in UTC and half the list is two hours early.

The fix was to stop treating times as text. Every fixture now carries one ISO timestamp in UTC, and the browser formats it:

const kickoff = new Date("2026-10-18T13:30:00Z");

const local = new Intl.DateTimeFormat(undefined, {
  weekday: "short", day: "numeric", month: "short",
  hour: "2-digit", minute: "2-digit"
}).format(kickoff);

const atGround = new Intl.DateTimeFormat("en-ZA", {
  timeZone: "Africa/Johannesburg",
  hour: "2-digit", minute: "2-digit"
}).format(kickoff);

local follows the reader's own settings, and atGround always shows the time at the stadium. I print both when they differ: "Sat 18 Oct, 15:30 (15:30 at the ground)" for someone at home, "Sat 18 Oct, 14:30 (15:30 at the ground)" for a supporter watching from London.

Two things caught me out:

Passing undefined as the locale is what makes it follow the reader. Hard-coding "en-US" turned every date into month-first, which nobody here reads that way.
Comparing "is this match today" has to happen in the ground's time zone, not the reader's, or a late kick-off shows up under the wrong day for people abroad.

No library, no time zone database to ship. The browser already has it.

DEV Community: Luvuyo Ndamase

"In 3 days" instead of a date: Intl.RelativeTimeFormat for a fixtures list

Counting days in the right time zone

When to stop being relative

Kick-off times that are right for everyone: Intl.DateTimeFormat instead of string maths