Timestamp
Material Design 3-styled timestamp web component (lit-material-timestamp) — absolute or relative date/time display on a native <time> element.
- 1.2 KB gzipped
- @lit-material/timestamp 0.0.3
- Renders on the server
Example
Timestamp
A date/time display built on the native <time> element, absolute or live-updating relative.
Markup
<lit-material-timestamp date="2026-11-02T09:52:50.894Z" date-format="medium" time-format="none"></lit-material-timestamp>
Fallback content
Install
npm install @lit-material/timestamp @lit-material/tokensimport "@lit-material/timestamp";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-timestamp>
A date/time display built on the native <time> element — its
machine-readable datetime attribute always holds a full ISO string
regardless of how the visible text is formatted.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
date | date | string | "" | An ISO 8601 date-time string. |
dateFormat | date-format | TimestampDateFormat | "medium" | |
timeFormat | time-format | TimestampTimeFormat | "none" | |
relative | relative | boolean | false | |
locale | locale | string | "" | BCP 47 locale tag. Defaults to the browser's own locale when unset. |
CSS parts
| Part | Description |
|---|---|
time | The <time> element. |