Skip to content
On this page

Timestamp

The j-timestamp component is used to display timestamps in various formats and styles.

Usage

html
<j-timestamp value="2023-04-05T12:34:56Z"></j-timestamp>

Properties

value string Use the value property to set the timestamp value to be displayed. This value should be in ISO format.

html
<j-timestamp value="2023-04-05T12:34:56Z"></j-timestamp>

locales string

Use the locales property to set the locale to be used when formatting the timestamp.


html
<j-timestamp value="2023-04-05T12:34:56Z" locales="en-US"></j-timestamp>
<j-timestamp value="2023-04-05T12:34:56Z" locales="fr-FR"></j-timestamp>

relative boolean

Use the relative property to display the timestamp as a relative time (e.g. "5 minutes ago") instead of an absolute time (e.g. "Apr 5, 2023, 12:34 PM").

html
<j-timestamp value="2023-04-05T12:34:56Z" relative></j-timestamp>

dateStyle string

Use the dateStyle property to set the style for the date portion of the timestamp. This property can be set to "full", "long", "medium", or "short".




html
<j-timestamp value="2023-04-05T12:34:56Z" dateStyle="full"></j-timestamp>
<j-timestamp value="2023-04-05T12:34:56Z" dateStyle="long"></j-timestamp>
<j-timestamp value="2023-04-05T12:34:56Z" dateStyle="medium"></j-timestamp>
<j-timestamp value="2023-04-05T12:34:56Z" dateStyle="short"></j-timestamp>

timeStyle string

Use the timeStyle property to set the style for the time portion of the timestamp. This property can be set to "full", "long", "medium", or "short". The property dateStyle is required for timeStyle to work.




html
<j-timestamp value="2023-04-05T12:34:56Z" timeStyle="full"></j-timestamp>
<j-timestamp value="2023-04-05T12:34:56Z" timeStyle="long"></j-timestamp>
<j-timestamp value="2023-04-05T12:34:56Z" timeStyle="medium"></j-timestamp>
<j-timestamp value="2023-04-05T12:34:56Z" timeStyle="short"></j-timestamp>

dayPeriod string

Use the dayPeriod property to set the period of the day (AM/PM) in the formatted timestamp. This property can take the following values: "narrow", "short", or "long".

html
<j-timestamp dayPeriod="short" value="2023-04-05T12:34:56Z"></j-timestamp>

hourCycle string

Use the hourCycle property to set the hour cycle in the formatted timestamp. This property can take the following values: "h11", "h12", "h23", or "h24".


html
<j-timestamp hourCycle="h12" value="2023-04-05T12:34:56Z"></j-timestamp>
<j-timestamp
  timeStyle="short"
  hourCycle="h12"
  value="2023-04-05T12:34:56Z"
></j-timestamp>

timeZone string

Use the timeZone property to set the time zone of the timestamp. This property can take a string value representing a valid time zone name.

html
<j-timestamp
  timeStyle="long"
  timeZone="America/Los_Angeles"
  value="2023-04-05T12:34:56Z"
></j-timestamp>

weekday string

Use the weekday property to display the weekday of the timestamp. This property can take the following values: "narrow", "short", or "long".

html
<j-timestamp weekday="short" value="2023-04-05T12:34:56Z"></j-timestamp>

era string

Use the era property to display the era of the timestamp. This property can take the following values: "narrow", "short", or "long".

html
<j-timestamp era="short" value="2023-04-05T12:34:56Z"></j-timestamp>

year string

Use the year property to display the year of the timestamp. This property can take the following values: "numeric", "2-digit".

html
<j-timestamp year="numeric" value="2023-04-05T12:34:56Z"></j-timestamp>

month string

Use the month property to display the month of the timestamp. This property can take the following values: "numeric", "2-digit", "narrow", "short", or "long".

html
<j-timestamp month="long" value="2023-04-05T12:34:56Z"></j-timestamp>

day string

Use the day property to display the day of the timestamp. This property can take the following values: "numeric", "2-digit".

html
<j-timestamp day="numeric" value="2023-04-05T12:34:56Z"></j-timestamp>

hour string

Use the hour property to display the hour of the timestamp. This property can take the following values: "numeric", "2-digit".

html
<j-timestamp hour="numeric" value="2023-04-05T12:34:56Z"></j-timestamp>

minute string

Use the minute property to display the minute of the timestamp. This property can take the following values: "numeric", "2-digit".

html
<j-timestamp minute="numeric" value="2023-04-05T12:34:56Z"></j-timestamp>

second string

Use the second property to display the second of the timestamp. This property can take the following values: "numeric", "2-digit".

html
<j-timestamp second="numeric" value="2023-04-05T12:34:56Z"></j-timestamp>