Demo, all content is generated
Question

Booking times show 2 hours off after deploying, correct on localhost

Open · 702 views · asked by quietmaya · edited

My booking page lists slots like "14:00". Locally correct. On Vercel they show "12:00". And sometimes for a split second it shows 14:00 and then jumps to 12:00? I'm in Amsterdam. The times are stored in Supabase as timestamptz.

What I’ve tried

Checked the database, times are correct there (with +00 at the end, which I think is right?).

Comment
Are you formatting the time in a server component or client component? sarah_k_dev · edited

2 answers

aiko_n · edited

Database is fine, +00 is UTC and that's how it should be stored. The problem is where you format it. On your laptop the server runs in Amsterdam time. On Vercel the server runs in UTC. So a server component doing date.toLocaleTimeString() prints UTC.

If the business has one timezone (a salon in Amsterdam), be explicit:

new Intl.DateTimeFormat("nl-NL", {
  timeZone: "Europe/Amsterdam",
  hour: "2-digit",
  minute: "2-digit",
}).format(new Date(slot.starts_at));

Same output on every server and every browser.

Comment
It's a yoga studio but yes, one timezone. What about the flicker? quietmaya · edited
That's the server rendering one value and the browser re-rendering with its own timezone (a hydration mismatch). Explicit timeZone fixes both. aiko_n · edited
Same with my 'opening hours' page, never thought about the server timezone. dirk_vl · edited
kofi_mensah · edited

If users can book from other timezones later, format on the client with the user's timezone and show it ("14:00 Amsterdam time"). But for a local studio, fixing it to Europe/Amsterdam is the right call.

Comment