Skip to main content

date Field Type

type: 'date' marks a field as a calendar date value. Pair it with renderAs: 'date' and a parseMode to render it in a locale-aware, human-readable format. Without renderAs, the raw value is displayed as plain text.

Core Examples​

Basic Date Rendering​

ISO date string rendered with parseMode: 'iso-date' and formatPreset: 'medium'.

Operation
Due Date
Payroll Sync
Reserve Sweep
Invoice Clear
{
  key: 'dueDate',
  label: 'Due Date',
  type: 'date',
  renderAs: 'date',
  renderAsOptions: { parseMode: 'iso-date', locale: 'en-US', formatPreset: 'medium' },
}

Condition​

Closed date column only appears for Payroll Sync (the only row with a non-null closedDate).

Operation
Due Date
Closed
Payroll Sync
Reserve Sweep
Invoice Clear
{
  key: 'closedDate',
  label: 'Closed',
  type: 'date',
  renderAs: 'date',
  renderAsOptions: { parseMode: 'iso-date', locale: 'en-US', formatPreset: 'medium' },
  condition: (entity) => Boolean(entity.closedDate),
}

Field Options Reference​

OptionTypeDefaultEffect
keystringrequiredEntity property to read the date value from.
labelstringunsetColumn header or card label.
type'date'—Marks the field as a calendar date. Pair with renderAs: 'date' for formatted output.
renderAs'date'unsetRequired for locale-aware date rendering. Without it, raw value renders as plain text.
condition(entity) => booleanunsetHides the field for rows where the function returns false.
sortablebooleanfalseEnables column sorting in table mode. 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: 'date'​

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

Caveats​

  • parseMode is required. Without it, the field renders 'Invalid' regardless of the value.
  • parseMode: 'iso-date' expects YYYY-MM-DD. An ISO datetime string like 2026-05-29T08:00:00Z will parse correctly with 'iso-datetime' or 'any', not 'iso-date'.
  • timezone controls the display timezone, not parsing. The underlying Date object is always UTC-based.
  • Table mode sorts chronologically when parseMode is declared and sortable: true is set. Without parseMode, sort falls back to generic string comparison.
  • relativeTime uses Intl.RelativeTimeFormat — output is locale-sensitive.

See Also​