Timestamp

Installation

We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.

For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

If you are using node and NPM, you can install this component using npm:

npm install @patternfly/elements

Then import this component into your project by using a bare module specifier:

import '@patternfly/elements/pf-timestamp/pf-timestamp.js';

Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.

Installation

npm install @patternfly/elements

Usage

Default

By default, a timestamp will display the current date and time based on the current locale if the date attribute is not set.

<pf-timestamp></pf-timestamp>

Basic formats

The format of the displayed content can be customized by setting the date-format and/or time-format attributes. Setting only one of the attributes will display only the date or time, depending on which attribute is set. The possible options are "full", "long", "medium", and "short".

You can also set the display-suffix attribute to display a custom suffix at the end of the displayed content. This will not override a timezone that is already displayed from the applied time format.

<pf-timestamp date-format="full" time-format="full"></pf-timestamp>

<pf-timestamp date-format="full"></pf-timestamp>

<pf-timestamp time-format="full"></pf-timestamp>

<pf-timestamp
  date-format="medium"
  time-format="short"
  display-suffix="US Eastern">
</pf-timestamp>

Custom format

The format of the displayed content can be further customized by setting the custom-format attributes. Read datetime format options for a list of options that can be set.

<pf-timestamp id="timestamp-custom-format"
        date="Sat Jan 01 2022 00:00:00 GMT-0500"></pf-timestamp>
<script>
  document.getElementById('timestamp-custom-format').customFormat = {
    year: '2-digit',
    month: 'short',
    weekday: 'short',
    day: 'numeric',
    hour: 'numeric'
  };
</script>

Adding a tooltip

To add a tooltip that displays the timestamp content as a UTC time, you can wrap pf-timestamp with pf-tooltip and set the utc attribute on an additional pf-timestamp.

<pf-tooltip>
  <pf-timestamp></pf-timestamp>
  <pf-timestamp slot="content" utc></pf-timestamp>
</pf-tooltip>

<pf-tooltip>
  <pf-timestamp></pf-timestamp>
  <pf-timestamp slot="content" utc display-suffix="Coordinated Universal Time"></pf-timestamp>
</pf-tooltip>

Relative time

To display relative time, set the relative attribute on pf-timestamp.

<pf-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></pf-timestamp>

<pf-timestamp date="Aug 09 2024 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></pf-timestamp>

Relative time with a tooltip

To display relative time, set the relative attribute on pf-timestamp.

<pf-tooltip>
  <pf-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></pf-timestamp>
  <pf-timestamp slot="content" date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)"></pf-timestamp>
</pf-tooltip>

<pf-tooltip>
  <pf-timestamp date="Aug 09 2024 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></pf-timestamp>
  <pf-timestamp slot="content" date="Aug 09 2024 14:57:00 GMT-0400 (Eastern Daylight Time)"></pf-timestamp>
</pf-tooltip>

Set a locale to something other than the default locale

The default locale is inferred by the browser. To set the locale to something else, set the locale attribute.

<pf-timestamp locale="en-GB" date-format="full" time-format="full"></pf-timestamp>

<pf-timestamp locale="es" date-format="full" time-format="full"></pf-timestamp>

As a UTC timestamp

Set the utc attribute.

<pf-timestamp utc></pf-timestamp>