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
OverviewStatusWhen to useStatus checklistOverviewStatusWhen to useStatus checklist

Overview

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.

import '@rhds/elements/rh-timestamp/rh-timestamp.js';
 
<rh-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400"></rh-timestamp>
 
import { Timestamp } from "@rhds/elements/react/rh-timestamp/rh-timestamp.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400" />
);

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.

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.

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.

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.

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.

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

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.

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.

 View source on GitHub

Status

When to use

  • When you need to customize date and time content

Status checklist

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