Components
Local time
Local time
Timestamps rendered in the visitor's own timezone, language and calendar - no server timezone
tables, no JavaScript date library. The server renders a semantic
<time datetime="...">
carrying the UTC instant; the PetalLocalTime
hook formats it client-side with the browser's Intl. Free in petal_components 4.8.
UTC:
2026-07-31T21:49:18.836425Z
Local:
heex
Formats
-
"datetime"(default) - medium date + short time, e.g. “21 Jul 2026, 8:41 pm” -
"date"/"time"- one half only -
"relative"- “12 seconds ago”, “yesterday”, “in 3 weeks”. Ticks live on a decaying cadence, re-renders when a background tab wakes, and flips to the absolute form once older thanthreshold. Hover shows the full absolute time. -
a map - raw
Intl.DateTimeFormatoptions with camelCase keys, passed through as-is:%{weekday: "long", hour: "2-digit", minute: "2-digit"}
at accepts a DateTime in any zone (normalised to UTC without a timezone database), a NaiveDateTime (assumed UTC), or an ISO8601 string.
Before the hook runs - and anywhere JavaScript never runs (RSS scrapes, reader modes, tests) - the element shows the UTC ISO string: honest, sortable, machine- and human-readable.
Properties
| Attribute | Type | Default | Description |
|---|---|---|---|
at*
|
any |
DateTime (any zone), NaiveDateTime (assumed UTC), or ISO8601 string | |
class
|
any |
nil
|
|
format
|
any |
"datetime"
|
"datetime", "date", "time", "relative", or a map of Intl.DateTimeFormat options (camelCase keys) |
id*
|
string |
||
locale
|
string |
nil
|
BCP 47 tag, e.g. "de-DE"; defaults to the browser's own |
rest
|
global |
||
threshold
|
integer |
604800
|
relative format only: age in seconds beyond which the absolute form renders instead (default 7 days) |
timezone
|
string |
nil
|
IANA zone, e.g. "Australia/Sydney"; defaults to the browser's own |
title
|
boolean |
true
|
relative format only: show the absolute time on hover |