Skip to content
PatternFly logo

Timestamp

A timestamp provides consistent formats for displaying date and time values.

Info alert:Beta feature

This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.

Examples

Default

By default, a timestamp will display the current date and time based on the current locale if the date prop is not passed in.

Basic formats

The format of the displayed content can be customized by passing in the dateFormat and/or timeFormat props. Passing in only one of the props will display only the date or time, depending on which prop is passed in. The possible options are "full", "long", "medium", and "short".

You can also pass in the displaySuffix prop 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.







Custom format

The format of the displayed content can be further customized by passing in the customFormat prop. Read datetime format options for a list of options that can be passed in.

Default tooltip

To render a tooltip that displays the timestamp content as a UTC time, you can pass in the tooltip prop with a variant of "default". The format of the default tooltip content will match the format of the timestamp content.

You can customize the suffix of this default tooltip variant by passing in suffix to the tooltip prop.



Custom content

To display custom content, such as a relative time or prefacing text, you can pass in content to the children prop.

When also rendering a default tooltip with the tooltip prop, you can pass in the dateFormat and/or timeFormat props to customize the tooltip content without affecting the custom timestamp content.



Custom tooltip

By passing in variant="custom" and content to the tooltip prop, you can display custom content within the timestamp's tooltip.



Props

Timestamp

*required
NameTypeDefaultDescription
childrenReact.ReactNodeDisplays custom content inside the timestamp, such as a relative time. This prop will override the default content that is displayed. Custom content will not be affected by any props that format or add to displayed content.
classNamestringClass to add to the outer span.
customFormat{ [key: string]: string }Applies custom formatting to the displayed date and/or time. Passing this prop in will override the dateFormat and timeFormat props.
dateDateDetermines the default content that is displayed inside the timestamp and the value of the inner time element's datetime attribute.
dateFormat'full' | 'long' | 'medium' | 'short'Determines the format of the displayed date in the timestamp and UTC tooltip. Examples: "Full" => Tuesday, August 9, 2022; "Long" => August 9, 2022; "Medium" => Aug 9, 2022; "Short" => 8/9/22
displaySuffixstring''Applies a custom suffix to the displayed content, usually after the time, such as a custom time zone.
is12HourbooleanFlag for displaying the time in a 12 hour format. If this prop is not passed in, the hour format will be based on the locale prop's value.
localestringDetermines which locale to use in the displayed content. Defaults to the current locale when this prop is not passed in. For more information about locale's: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
timeFormat'full' | 'long' | 'medium' | 'short'Determines the format of the displayed time in the timestamp and UTC tooltip. Examples: "Full" => 11:25:00 AM Eastern Daylight Time "Long" => 11:25:00 AM EDT "Medium" => 11:25:00 AM "Short" => 11:25 AM
tooltipTimestampTooltipAdds a tooltip to the timestamp.

TimestampTooltip

*required
NameTypeDefaultDescription
variantrequired'default' | 'custom'The variant of the tooltip. The "default" variant displays the date passed into the timestamp's date prop as a UTC string.
contentReact.ReactNodeContent displayed in the tooltip when using the "custom" variant.
suffixstringA custom suffix to apply to a "default" variant tooltip.
tooltipPropsanyAdditional props passed to the tooltip.

CSS variables

.pf-c-timestamp--pf-c-timestamp--FontSize
0.875rem
.pf-c-timestamp--pf-c-timestamp--Color
#6a6e73
.pf-c-timestamp--pf-c-timestamp--OutlineOffset
0.1875rem
.pf-c-timestamp--pf-c-timestamp--m-help-text--TextDecorationLine
underline
.pf-c-timestamp--pf-c-timestamp--m-help-text--TextDecorationStyle
dashed
.pf-c-timestamp--pf-c-timestamp--m-help-text--TextDecorationThickness
1px
.pf-c-timestamp--pf-c-timestamp--m-help-text--TextUnderlineOffset
0.25rem
.pf-c-timestamp--pf-c-timestamp--m-help-text--TextDecorationColor
#8a8d90
.pf-c-timestamp--pf-c-timestamp--m-help-text--hover--Color
#151515
.pf-c-timestamp--pf-c-timestamp--m-help-text--focus--Color
#151515
.pf-c-timestamp--pf-c-timestamp--m-help-text--hover--TextDecorationColor
#151515
.pf-c-timestamp--pf-c-timestamp--m-help-text--focus--TextDecorationColor
#151515
.pf-c-timestamp.pf-m-help-text:hover--pf-c-timestamp--Color
#151515
.pf-c-timestamp.pf-m-help-text:hover--pf-c-timestamp--m-help-text--TextDecorationColor
#151515
.pf-c-timestamp.pf-m-help-text:focus--pf-c-timestamp--Color
#151515
.pf-c-timestamp.pf-m-help-text:focus--pf-c-timestamp--m-help-text--TextDecorationColor
#151515

View source on GitHub