Timezone Selector

Control for choosing a timezone.

html

<div class="tzs" data-hour="15" data-minute="30" data-tz="America/New_York">
  <p class="tzs__utc">15:30 UTC in&hellip;</p>
  <p class="tzs__zone" style="color:#D9C8F0;">America/New_York</p>
  <p class="tzs__value">&nbsp;</p>
</div>
<script>(function () {
  var el = document.querySelector(".tzs");
  if (!el) return;
  var d = new Date(Date.UTC(2026, 0, 15, Number(el.dataset.hour), Number(el.dataset.minute)));
  var fmt = new Intl.DateTimeFormat("en-GB", { timeZone: el.dataset.tz, hour: "2-digit", minute: "2-digit", weekday: "short" });
  el.querySelector(".tzs__value").textContent = fmt.format(d);
})();</script>
<style>
.tzs { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 280px; box-sizing: border-box; }
.tzs__utc { margin: 0 0 4px; font-size: 11px; color: #24143099; }
.tzs__zone { margin: 0 0 12px; font: 700 13px ui-monospace, monospace; }
.tzs__value { margin: 0; font-size: 24px; font-weight: 800; }
</style>

tailwind

<div class="tzstw font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[280px] box-border" data-hour="15" data-minute="30" data-tz="America/New_York">
  <p class="m-0 mb-1 text-[11px] text-[#24143099]">15:30 UTC in&hellip;</p>
  <p class="m-0 mb-3 font-mono font-bold text-[13px]" style="color:#D9C8F0;">America/New_York</p>
  <p class="tzstw__value m-0 text-2xl font-extrabold">&nbsp;</p>
</div>
<script>(function () {
  var el = document.querySelector(".tzstw");
  if (!el) return;
  var d = new Date(Date.UTC(2026, 0, 15, Number(el.dataset.hour), Number(el.dataset.minute)));
  var fmt = new Intl.DateTimeFormat("en-GB", { timeZone: el.dataset.tz, hour: "2-digit", minute: "2-digit", weekday: "short" });
  el.querySelector(".tzstw__value").textContent = fmt.format(d);
})();</script>

react

import { useMemo } from "react";

export function TimezoneSelector({
  utcHour = 15,
  utcMinute = 30,
  timezone = "America/New_York",
  accent = "#D9C8F0",
}) {
  const value = useMemo(() => {
    const d = new Date(Date.UTC(2026, 0, 15, utcHour, utcMinute));
    return new Intl.DateTimeFormat("en-GB", { timeZone: timezone, hour: "2-digit", minute: "2-digit", weekday: "short" }).format(d);
  }, [utcHour, utcMinute, timezone]);
  return (
    <div style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, width: 280, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 4px", fontSize: 11, color: "#24143099" }}>{utcHour}:{utcMinute} UTC in&hellip;</p>
      <p style={{ margin: "0 0 12px", fontFamily: "ui-monospace, monospace", fontWeight: 700, fontSize: 13, color: accent }}>{timezone}</p>
      <p style={{ margin: 0, fontSize: 24, fontWeight: 800 }}>{value}</p>
    </div>
  );
}