DynamicClocks is a JavaScript which displays live timezone-adjusted clocks anywhere on a page using a simple class and data attributes. It supports IANA timezones, raw UTC offsets, custom format strings, and more.
Installation
Usage
Add the class dynamic-clock to any element and configure it using data attributes. It is recommended to add placeholder text such as Loading... inside the element so users see something before the script runs.
<span class="dynamic-clock" data-timezone="America/New_York">Loading...</span>
Configuration
Parameters
| Attribute | Description | Default |
|---|---|---|
data-timezone |
IANA timezone name (e.g. America/New_York) or UTC offset (e.g. +5:30, -8). IANA timezone names are case-sensitive. If an invalid timezone is provided, the element will display Invalid timezone. |
UTC
|
data-format |
Format string controlling how the time and date are displayed. See Tokens below. | h:mm - D/M/YYYY
|
data-show-offset |
Set to true to append the UTC offset to the output (e.g. UTC+2) |
false
|
Tokens
The following tokens can be used in data-format. To use a letter literally without it being treated as a token, escape it with a backslash (e.g. \h outputs a literal h).
Time
| Token | Description | Example |
|---|---|---|
h |
12-hour, no leading zero | 6
|
hh |
12-hour, with leading zero | 06
|
H |
24-hour, no leading zero | 6
|
HH |
24-hour, with leading zero | 06
|
m |
Minutes, no leading zero | 5
|
mm |
Minutes, with leading zero | 05
|
s |
Seconds, no leading zero | 9
|
ss |
Seconds, with leading zero | 09
|
AM/PM is appended automatically when using 12-hour tokens (h or hh). It is inserted immediately after the last time token, before any date content.
By default the clock updates every minute, synchronised to the next minute boundary. If s or ss is present in the format string, the clock instead updates every second, synchronised to the next second boundary.
Date
Day name tokens use lowercase (ddd, dddd) to avoid clashing with the day number token DD.
| Token | Description | Example |
|---|---|---|
D |
Day of month, no leading zero | 9
|
DD |
Day of month, with leading zero | 09
|
ddd |
Abbreviated day name | Thu
|
dddd |
Full day name | Thursday
|
M |
Month number, no leading zero | 4
|
MM |
Month number, with leading zero | 04
|
MMM |
Abbreviated month name | Apr
|
MMMM |
Full month name | April
|
YY |
Last two digits of year | 26
|
YYYY |
Full year | 2026
|
Examples
- Default
<span class="dynamic-clock" data-timezone="America/New_York">Loading...</span>
- Loading...
- 24-hour with seconds
<span class="dynamic-clock" data-timezone="Asia/Tokyo" data-format="HH:mm:ss">Loading...</span>
- Loading...
- UTC offset (+5:30)
<span class="dynamic-clock" data-timezone="+5:30">Loading...</span>
- Loading...
- UTC offset (-8)
<span class="dynamic-clock" data-timezone="-8">Loading...</span>
- Loading...
- Full date and time
<span class="dynamic-clock" data-timezone="Europe/London" data-format="h:mm - dddd, D MMMM YYYY">Loading...</span>
- Loading...
- Show UTC offset
<span class="dynamic-clock" data-timezone="America/Los_Angeles" data-show-offset="true">Loading...</span>
- Loading...
- Escaped literals
<span class="dynamic-clock" data-timezone="Asia/Dubai" data-format="H\h m\m ss\s">Loading...</span>
- Loading...
- Short year
<span class="dynamic-clock" data-timezone="Asia/Seoul" data-format="h:mm - D/M/YY">Loading...</span>
- Loading...
- Everything at once
<span class="dynamic-clock" data-timezone="Europe/Paris" data-format="hh:mm:ss - DD MMM YYYY" data-show-offset="true">Loading...</span>
- Loading...
Changelog
| Date | Notes | Updated by |
|---|---|---|
| April 9, 2026 | First publication of the script. | DaBritishWaffle |