Skip to main content

timestamp Renderer

renderAs: 'timestamp' is a datetime renderer optimised for epoch-based values. It shares all capabilities of the datetime renderer but requires parseMode to be explicit — there is no ambiguity-tolerant 'any' fallback encouraged for epoch data.

Core Examples​

Epoch-ms and Epoch-sec​

Millisecond and second epoch values formatted with the short preset.

Name
Created (epoch-ms)
Updated (epoch-sec)
Aurora Chen
Mateo Silva
Priya Nair
{ key: 'createdMs',  renderAs: 'timestamp', renderAsOptions: { parseMode: 'epoch-ms',  formatPreset: 'short' } }
{ key: 'updatedSec', renderAs: 'timestamp', renderAsOptions: { parseMode: 'epoch-sec', formatPreset: 'short' } }

Relative Time​

Same relativeTime and relativeDisplay options as datetime:

Epoch-ms timestamp in 'both' mode — absolute date on top, relative time below.

Name
Created
Aurora Chenlast year
Mateo Silvalast year
Priya Nairlast year
{ renderAs: 'timestamp', renderAsOptions: {
  parseMode: 'epoch-ms',
  relativeTime: true,
  relativeDisplay: 'both',
  timezone: 'utc',
}}

Timezone​

Same epoch-ms value displayed in UTC, America/New_York, and Asia/Tokyo.

Name
UTC
America/New_York
Asia/Tokyo
Aurora Chen
Mateo Silva
Priya Nair
{ renderAs: 'timestamp', renderAsOptions: { parseMode: 'epoch-ms', timezone: 'utc',              formatPreset: 'long' } }
{ renderAs: 'timestamp', renderAsOptions: { parseMode: 'epoch-ms', timezone: 'America/New_York', formatPreset: 'long' } }
{ renderAs: 'timestamp', renderAsOptions: { parseMode: 'epoch-ms', timezone: 'Asia/Tokyo',       formatPreset: 'long' } }

Options Reference​

timestamp inherits all options from datetime. parseMode is required (typed as non-optional).

OptionTypeDefaultEffect
parseMode'epoch-ms' | 'epoch-sec' | 'iso-datetime' | 'any'requiredHow to parse the raw value.
localestring'en-US'BCP 47 locale tag.
timezonestring'local''local', 'utc', or IANA zone.
formatPreset'short' | 'medium' | 'long' | 'full''medium'Preset Intl option set.
formatOptionsIntl.DateTimeFormatOptionsunsetFull Intl.DateTimeFormat options.
showSecondsbooleanfalseInclude seconds component.
hour12booleanlocale defaultForce 12h or 24h.
relativeTimebooleanfalseUse Intl.RelativeTimeFormat.
relativeDisplay'relative' | 'both''relative''both' stacks absolute + relative.
fallbackTextstring'Invalid'Text shown when parsing fails.
classNamestringunsetAdditional CSS class on the root element.

Caveats​

  • parseMode is required. Without it the renderer outputs fallbackText immediately — unlike datetime where parseMode is optional and defaults to 'any'.
  • epoch-ms vs epoch-sec: a 10-digit number (seconds since epoch) passed to epoch-ms will render as a date in 1970. Always use the matching parse mode for your data source.
  • 'any' parse mode is available but discouraged for epoch values — the heuristic (numbers ≥ 1e12 treated as ms, otherwise as seconds) may misclassify values near the boundary.
  • All options accept (entity) => value functions for per-row dynamic values.

See Also​