Skip to main content

datetime Field Type

type: 'datetime' marks a field as a combined date-and-time value. Pair it with renderAs: 'datetime' and parseMode: 'iso-datetime' (for ISO 8601 strings) to render locale-aware output. Supports relative time display and timezone control.

Core Examples​

Basic Datetime Rendering​

ISO datetime string rendered with parseMode: 'iso-datetime', timezone: 'utc', and formatPreset: 'medium'.

Operation
Posted At
Payroll Sync
Reserve Sweep
Invoice Clear
{
  key: 'postedAt',
  label: 'Posted At',
  type: 'datetime',
  renderAs: 'datetime',
  renderAsOptions: { parseMode: 'iso-datetime', locale: 'en-US', timezone: 'utc', formatPreset: 'medium' },
}

Condition​

Confirmed column only appears for Payroll Sync — the only row with a non-null confirmedAt value.

Operation
Posted At
Confirmed
Payroll Sync
Reserve Sweep
Invoice Clear
{
  key: 'confirmedAt',
  label: 'Confirmed',
  type: 'datetime',
  renderAs: 'datetime',
  renderAsOptions: { parseMode: 'iso-datetime', locale: 'en-US', timezone: 'utc', formatPreset: 'medium' },
  condition: (entity) => Boolean(entity.confirmedAt),
}

Field Options Reference​

OptionTypeDefaultEffect
keystringrequiredEntity property to read the datetime value from.
labelstringunsetColumn header or card label.
type'datetime'—Marks the field as a combined date-time value. Pair with renderAs: 'datetime'.
renderAs'datetime'unsetRequired for formatted output. Without it, raw value renders as plain text.
condition(entity) => booleanunsetHides the field for rows where the function returns false.
sortablebooleanfalseEnables column sorting. Sorts chronologically when parseMode is set.
widthCSS length or numberunsetSets column width in table mode.
align'left', 'center', 'right''left'Text alignment in table mode.

renderAsOptions for renderAs: 'datetime'​

parseMode is required — without it the field renders 'Invalid'. All other display options (formatPreset, locale, timezone, relativeTime, showSeconds, hour12, formatOptions, etc.) are documented on the datetime Renderer page.

Caveats​

  • parseMode is required. Without it, the field renders 'Invalid'.
  • parseMode: 'iso-datetime' expects a full ISO 8601 datetime string including time component (e.g. 2026-05-29T08:15:10Z). A date-only string like 2026-05-29 will not parse — use type: 'date' for date-only values.
  • timezone controls the display timezone only — the value is always stored and parsed as UTC-relative.
  • The full preset includes a timezone abbreviation (e.g. UTC, PDT). This requires the timezone option to be set explicitly.

See Also​