Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button group Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Readtime Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Timestamp

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-timestampImportingUsagerh-timestamp

Importing

Add rh-timestamp to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-timestamp/rh-timestamp.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Usage 

<rh-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400"></rh-timestamp>

<script type="module">
  import '@rhds/elements/rh-timestamp/rh-timestamp.js';
</script>
Copy to Clipboard Wrap lines

rh-timestamp

Provides locale-aware date and time formatting for consistent display across pages. Renders a <time> element with an ARIA-accessible datetime attribute for screen readers. Authors must set date when displaying a specific moment; when omitted, the current time is used. Authors should wrap relative timestamps in rh-tooltip so users can see the full date. Avoid combining date-format and time-format with customFormat as customFormat overrides both. The element is not keyboard-focusable on its own.

Slots 0

None

Attributes 8

Attribute DOM Property Description Type Default
date-format dateFormat

Sets the date formatting style. When set without time-format, only the date portion is displayed. Accepts full, long, medium, or short. See MDN for details on each style.

 
'full' | 'long' | 'medium' | 'short'
 
unknown
time-format timeFormat

Sets the time formatting style. When set without date-format, only the time portion is displayed. Accepts full, long, medium, or short. See MDN for details on each style.

 
'full' | 'long' | 'medium' | 'short'
 
unknown
display-suffix displaySuffix

Appends custom text after the formatted timestamp string. Useful for displaying a timezone label (e.g. "US Eastern") when the built-in time format does not include one.

 
string
 
unknown
locale locale

Overrides the browser's default locale for formatting. Accepts any valid BCP 47 language tag (e.g. "en-GB", "es", "ja"). Defaults to the browser's locale when not set.

 
string
 
unknown
relative relative

When set, displays the timestamp as a relative time string (e.g. "3 hours ago", "in 2 days") instead of an absolute date. Uses Intl.RelativeTimeFormat for locale-aware output.

 
boolean
 
unknown
utc utc

When set, converts the displayed time to UTC. If no display-suffix is provided, "UTC" is automatically appended.

 
boolean
 
unknown
hour-12 hour12

When set, uses 12-hour time format (e.g. "2:30 PM") instead of 24-hour time (e.g. "14:30"). Accepts the attribute values "true" or "false", or can be set as a boolean property.

 
boolean
 
unknown
date date

The date value to display, as a date string parseable by new Date(). If not set, defaults to the current date and time. When read, returns the locale-formatted string representation of the date.

 
unknown
 
unknown

Methods 0

None

Events 0

None

CSS Shadow Parts 0

None

CSS Custom Properties 0

None

Design Tokens 0

None

Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify