Skip to main content

date Renderer

renderAs: 'date' formats a date-only value using Intl.DateTimeFormat. Set parseMode to tell the renderer how to interpret the raw value.

Core Examples​

Basic Date​

ISO date strings formatted with the default medium preset. A null contract date uses a custom fallbackText.

Name
Joined
Contract ends
Aurora Chen
Mateo Silva
Priya NairPermanent
{ key: 'joined',   renderAs: 'date', renderAsOptions: { parseMode: 'iso-date' } }
{ key: 'contract', renderAs: 'date', renderAsOptions: { parseMode: 'iso-date', fallbackText: 'Permanent' } }

Format Presets​

formatPreset maps to Intl.DateTimeFormat option sets. The same date displayed across all four presets:

short / medium / long / full presets applied to the same ISO date value.

Name
short
medium
long
full
Aurora Chen
Mateo Silva
Priya Nair
{ renderAs: 'date', renderAsOptions: { parseMode: 'iso-date', formatPreset: 'short'  } }  // 3/15/23
{ renderAs: 'date', renderAsOptions: { parseMode: 'iso-date', formatPreset: 'medium' } }  // Mar 15, 2023 (default)
{ renderAs: 'date', renderAsOptions: { parseMode: 'iso-date', formatPreset: 'long'   } }  // March 15, 2023
{ renderAs: 'date', renderAsOptions: { parseMode: 'iso-date', formatPreset: 'full'   } }  // Wednesday, March 15, 2023

Locale​

locale accepts any BCP 47 locale tag. Output follows the locale's date ordering and month names:

Same date rendered in US English, German, and Japanese.

Name
en-US
de-DE
ja-JP
Aurora Chen
Mateo Silva
Priya Nair
{ renderAs: 'date', renderAsOptions: { parseMode: 'iso-date', locale: 'en-US', formatPreset: 'long' } }
{ renderAs: 'date', renderAsOptions: { parseMode: 'iso-date', locale: 'de-DE', formatPreset: 'long' } }
{ renderAs: 'date', renderAsOptions: { parseMode: 'iso-date', locale: 'ja-JP', formatPreset: 'long' } }

Options Reference​

OptionTypeDefaultEffect
parseModeTemporalParseModerequiredHow to parse the raw value. See parse modes below.
localestring'en-US'BCP 47 locale tag for Intl.DateTimeFormat.
timezonestring'local''local', 'utc', or any IANA timezone (e.g. 'America/New_York').
formatPreset'short' | 'medium' | 'long' | 'full''medium'Preset Intl option set for date display.
formatOptionsIntl.DateTimeFormatOptionsunsetFull Intl.DateTimeFormat options. Merged over formatPreset; explicit timeZone inside formatOptions takes precedence over timezone.
fallbackTextstring'Invalid'Text shown when the value cannot be parsed.
classNamestringunsetAdditional CSS class on the root element.

parseMode values​

ValueParses
'iso-date'YYYY-MM-DD strings
'iso-datetime'ISO 8601 datetime strings
'epoch-ms'Unix timestamp in milliseconds
'epoch-sec'Unix timestamp in seconds
'iso-time'HH:MM[:SS] strings (anchored to 1970-01-01)
'any'Auto-detect: tries epoch heuristic, then ISO patterns

Caveats​

  • parseMode is required. Without it the renderer outputs fallbackText immediately without attempting to parse.
  • iso-date input is parsed as local midnight (YYYY-MM-DDT00:00:00). Combined with a non-local timezone in formatOptions, the displayed date may shift by one day.
  • formatOptions is deep-merged over formatPreset output. A timeZone key inside formatOptions takes full precedence over the timezone option.
  • Date objects are accepted directly by all parse modes and bypass the parse step.
  • All options accept (entity) => value functions for per-row dynamic values.

See Also​