Live demo — this example is server-driven; run the showcase locally for the interactive version.

Timestamp

A consistently-formatted date/time display. Renders a semantic <time> element with the machine-readable ISO value in the datetime attribute. Formatting is a server-side concern — pre-format the human-readable string and pass it in.

Examples

Default

Semantic <time> with a datetime attribute.

May 20, 2026 at 2:30 PM

Basic formats

Full, long, medium, and short renderings of one instant.

Wednesday, May 20, 2026 at 2:30:00 PM UTC May 20, 2026 at 2:30:00 PM UTC May 20, 2026, 2:30 PM 5/20/26, 2:30 PM

Custom format

Any display string over the same datetime.

2026-05-20 · 14:30 UTC

Custom content

Relative wording ("3 weeks ago") with the machine-readable value intact.

3 weeks ago

Inline

Flows inside a sentence.

The article was last edited 2 hours ago by Jane Doe.

Hover reveals the UTC form via a native browser tooltip.

The tooltip carries custom content instead of the UTC datetime; the second timestamp also overrides the display text.

Documentation

Timestamp props

Parameters accepted by {#include components/data-display/timestamp ... /}. Model mode: pass timestamp=<Timestamp> built in Java instead — the Java tab on each example shows the builder.

* required
Name	Type	Description
* (content slot)	Slot	Pre-formatted, human-readable timestamp passed as the include body ("May 20, 2026", "2h ago", etc.). Mirrors PF React's `children` override.
`id`	String	DOM id on the <time> element.
`datetime`	String (ISO 8601)	Machine-readable timestamp — emitted as the <time> `datetime` attribute.
`tooltip`	String	Sets the HTML `title` attribute — browser-native tooltip on hover.

Divergence from PF React. PF React's timestamp accepts a date object and formats client-side with dateFormat/timeFormat/customFormat/locale/is12Hour props. We don't — formatting happens server-side. Pass a Java DateTimeFormatter result as the include body and the ISO string as datetime.

Usage

Always include datetime. The visible text may be relative ("2 hours ago") or locale-formatted; the datetime attribute is what AT, search engines, and JS pickup. Use ISO 8601 with a timezone.

Relative + absolute pairing. The common pattern is a relative visible text ("2h ago") plus a tooltip with the absolute ISO time — see the With tooltip example.

Edit timestamp.html on GitHub