Show the visitor's local time and a live clock with JavaScript (and jQuery)

jQuery & JavaScript · By the Postback Notes editorial team · Published 2026-09-20

Server-side code such as DateTime.Now gives the server's time, in the server's time zone. To show visitors their own time, the browser must do it: JavaScript's Date reads the computer's clock and time zone, and Intl.DateTimeFormat formats it in the visitor's language.

Show the time once

<p>Your local time: <time id="now"></time></p>
<script>
  var el = document.getElementById("now");
  var d = new Date();
  el.dateTime = d.toISOString();
  el.textContent = d.toLocaleString(undefined, { dateStyle: "full", timeStyle: "short" });
</script>

undefined as the locale means "the browser's language", so a visitor in Germany sees a German date. Pass a locale such as "en-GB" to force one.

A live clock

<p class="clock" aria-live="off"><span id="clock">--:--:--</span> <small id="zone"></small></p>
<script>
  (function () {
    var fmt = new Intl.DateTimeFormat(undefined, { hour: "2-digit", minute: "2-digit", second: "2-digit" });
    var clock = document.getElementById("clock");
    document.getElementById("zone").textContent = Intl.DateTimeFormat().resolvedOptions().timeZone;

    function tick() {
      var now = new Date();
      clock.textContent = fmt.format(now);
      // schedule the next update at the start of the next second, so the clock does not drift
      setTimeout(tick, 1000 - now.getMilliseconds());
    }
    tick();
  })();
</script>

Re-scheduling with setTimeout aligned to the second keeps the display in step with the system clock; a plain setInterval(tick, 1000) can slowly fall behind and skip a second. aria-live="off" stops screen readers from announcing every tick.

The jQuery version

$(function () {
  var $clock = $("#clock");
  function pad(n) { return (n < 10 ? "0" : "") + n; }
  function tick() {
    var d = new Date();
    $clock.text(pad(d.getHours()) + ":" + pad(d.getMinutes()) + ":" + pad(d.getSeconds()));
    setTimeout(tick, 1000 - d.getMilliseconds());
  }
  tick();
});

jQuery only helps with selecting the element here; the time logic is plain JavaScript. The manual padding produces a fixed 24-hour format regardless of language.

Server time vs client time

The visitor's clock may be wrong. For anything that matters (deadlines, logs, orders), use server time, stored in UTC (DateTime.UtcNow).
To show a server timestamp in the visitor's zone, send it in ISO 8601 UTC (dt.ToString("o") on a UTC value) and format it in the browser with new Date(iso).toLocaleString(). Converting dates that arrive from JSON is covered in Format a JSON date as a local date.
In ASP.NET Web Forms, render the value into the page, e.g. <time datetime="<%= order.CreatedUtc.ToString("o") %>">, and let a script convert all time elements.

Common mistakes

Using getYear() (deprecated, returns years since 1900) instead of getFullYear().
Forgetting that getMonth() is zero-based: January is 0.
Writing the server's DateTime.Now into the page and calling it "your local time": it is the server's.

Official documentation

MDN: Date, Intl.DateTimeFormat, <time>
Microsoft Learn: Round-trip ("O") format specifier