time Renderer

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

Core Examples

Basic Time

ISO time strings formatted with locale defaults — hours and minutes, no seconds.

Name	Check-in	Scheduled
Aurora Chen	09:15 AM	09:00 AM
Mateo Silva	02:30 PM	02:00 PM
Priya Nair	08:05 AM	08:00 AM

{ key: 'checkin', renderAs: 'time', renderAsOptions: { parseMode: 'iso-time' } }

12h / 24h and Seconds

hour12 forces 12- or 24-hour output. showSeconds adds the seconds component:

Same check-in time displayed as 12h without seconds and 24h with seconds.

Name	12h no seconds	24h with secs
Aurora Chen	09:15 AM	09:15:42
Mateo Silva	02:30 PM	14:30:00
Priya Nair	08:05 AM	08:05:11

{ renderAs: 'time', renderAsOptions: { parseMode: 'iso-time', hour12: true,  showSeconds: false } }
{ renderAs: 'time', renderAsOptions: { parseMode: 'iso-time', hour12: false, showSeconds: true  } }

Timezone

timezone accepts 'local', 'utc', or any IANA zone string. Affects the displayed clock time:

Same ISO time string displayed in local, UTC, and America/New_York timezones.

Name	Local	UTC	America/New_York
Aurora Chen	09:15 AM	09:15:42 AM	04:15:42 AM
Mateo Silva	02:30 PM	02:30:00 PM	09:30:00 AM
Priya Nair	08:05 AM	08:05:11 AM	03:05:11 AM

{ renderAs: 'time', renderAsOptions: { parseMode: 'iso-time', timezone: 'local' } }
{ renderAs: 'time', renderAsOptions: { parseMode: 'iso-time', timezone: 'utc',              showSeconds: true } }
{ renderAs: 'time', renderAsOptions: { parseMode: 'iso-time', timezone: 'America/New_York', showSeconds: true } }

Options Reference

Option	Type	Default	Effect
parseMode	TemporalParseMode	required	How to parse the raw value.
locale	string	'en-US'	BCP 47 locale tag for Intl.DateTimeFormat.
timezone	string	'local'	'local', 'utc', or IANA zone (e.g. 'Europe/Berlin').
showSeconds	boolean	false	Include the seconds component in the output.
hour12	boolean	locale default	true forces AM/PM; false forces 24-hour. Omit to use locale default.
formatOptions	Intl.DateTimeFormatOptions	unset	Full Intl.DateTimeFormat options — merged over defaults. timeZone inside formatOptions takes precedence over timezone.
fallbackText	string	'Invalid'	Text shown when the value cannot be parsed.
className	string	unset	Additional CSS class on the root element.

parseMode values

Value	Parses
'iso-time'	HH:MM[:SS[.mmm]] strings (anchored to 1970-01-01)
'iso-datetime'	ISO 8601 datetime strings
'epoch-ms'	Unix timestamp in milliseconds
'epoch-sec'	Unix timestamp in seconds
'any'	Auto-detect

Caveats

• parseMode is required. Without it the renderer outputs fallbackText immediately.
• iso-time values are anchored to 1970-01-01. Applying a timezone that converts the time across midnight may produce unexpected dates — though for time-only display this is generally invisible.
• hour12: undefined (the default) defers to the locale. Set explicitly to true or false to override.
• formatOptions merged over built-in options. A timeZone key inside formatOptions takes full precedence over the timezone option.
• All options accept (entity) => value functions for per-row dynamic values.

See Also

• datetime Renderer
• date Field Type
• Field Config