Skip to main content

time Field Type

type: 'time' marks a field as a time-of-day value. Pair it with renderAs: 'time' and parseMode: 'iso-time' to render it in a locale-aware format. Use showSeconds and hour12 to control display granularity.

Core Examples​

Basic Time Rendering​

ISO time string rendered in 24-hour format with seconds.

Operation
Checkpoint
Payroll Sync
Reserve Sweep
Invoice Clear
{
  key: 'checkpointTime',
  label: 'Checkpoint',
  type: 'time',
  renderAs: 'time',
  renderAsOptions: { parseMode: 'iso-time', locale: 'en-US', showSeconds: true, hour12: false },
}

Condition​

Scheduled time hidden for Invoice Clear.

Operation
Checkpoint
Scheduled
Payroll Sync
Reserve Sweep
Invoice Clear
{
  key: 'scheduledTime',
  label: 'Scheduled',
  type: 'time',
  renderAs: 'time',
  renderAsOptions: { parseMode: 'iso-time', locale: 'en-US', showSeconds: false, hour12: false },
  condition: (entity) => entity.operation !== 'Invoice Clear',
}

Field Options Reference​

OptionTypeDefaultEffect
keystringrequiredEntity property to read the time value from.
labelstringunsetColumn header or card label.
type'time'—Marks the field as a time-of-day value. Pair with renderAs: 'time'.
renderAs'time'unsetRequired for formatted time 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: 'time'​

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

Caveats​

  • parseMode is required. Without it, the field renders 'Invalid'.
  • parseMode: 'iso-time' expects HH:mm:ss. Values without seconds (HH:mm) may parse differently across environments — include seconds for reliability.
  • type: 'time' has no relativeTime option — relative time is not meaningful for time-of-day values. Use type: 'datetime' or type: 'timestamp' for relative display.
  • timezone affects display only. An iso-time value has no inherent timezone — the time is interpreted as-is in the requested timezone.

See Also​