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

Basic

Thursday, 21 January 2019, 9:38 PM EST

21 January 2019, 9:38 PM EST

21 Jan. 2019, 9:38 PM EST

1 hour ago

Tomorrow

Documentation

Usage

Class	Applied to	Outcome
`.pf-c-timestamp`	`<span>`	Creates a timestamp. Required
`.pf-c-timestamp__text`	`<time>`	Creates the visual text of the timestamp. Required
`.pf-m-help-text`	`.pf-c-timestamp`	Modifies styling for a timestamp that has help text.

CSS variables


	.pf-c-timestamp	--pf-c-timestamp--FontSize	0.875rem
--pf-c-timestamp--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-timestamp	--pf-c-timestamp--Color	#6a6e73
--pf-c-timestamp--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #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--m-help-text--TextDecorationThickness --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 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--m-help-text--TextDecorationColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-timestamp	--pf-c-timestamp--m-help-text--hover--Color	#151515
--pf-c-timestamp--m-help-text--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-timestamp	--pf-c-timestamp--m-help-text--focus--Color	#151515
--pf-c-timestamp--m-help-text--focus--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-timestamp	--pf-c-timestamp--m-help-text--hover--TextDecorationColor	#151515
--pf-c-timestamp--m-help-text--hover--TextDecorationColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-timestamp	--pf-c-timestamp--m-help-text--focus--TextDecorationColor	#151515
--pf-c-timestamp--m-help-text--focus--TextDecorationColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-timestamp.pf-m-help-text:hover	--pf-c-timestamp--Color	#151515
--pf-c-timestamp--Color --pf-c-timestamp--m-help-text--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-timestamp.pf-m-help-text:hover	--pf-c-timestamp--m-help-text--TextDecorationColor	#151515
--pf-c-timestamp--m-help-text--TextDecorationColor --pf-c-timestamp--m-help-text--hover--TextDecorationColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-timestamp.pf-m-help-text:focus	--pf-c-timestamp--Color	#151515
--pf-c-timestamp--Color --pf-c-timestamp--m-help-text--focus--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-timestamp.pf-m-help-text:focus	--pf-c-timestamp--m-help-text--TextDecorationColor	#151515
--pf-c-timestamp--m-help-text--TextDecorationColor --pf-c-timestamp--m-help-text--focus--TextDecorationColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines