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

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