DateTimeDisplay

The DateTimeDisplay component renders any aspect of a dates or time in a large variety of formats.

For more information on how to use the features and props for this component, check out the developer documentation.

DateTimeDisplay is an ideal component for rendering any date/time as a string representing the absolute or relative value with the added locale support offered via the Configuration component.

Several options are available to modify the appearance of the date/time value provided. The variant defines the scope of the value from time to year and many in-between, as well as a robust relative option that displays the value in plain text. The format of the display can also change from long to short, as well as numeric. You can also change the clockFormat from 12 hours to 24 hours.

The DurationDisplay component only displays the amount of time that has passed since the given value (provided in milliseconds). The time passed will be displayed in a rather simple format of days, hours, minutes, and seconds passed. The specificity of the display can be altered via the significantUnits prop where 4 will display all of the units available and 1 will display only the hours. Lowering the number of units to display will not cause the values for each unit to round up.

NameTypeDefaultDescription
variant*DateTimeVariantControls date time variant.
classNamestringAdditional CSS classes.
clockFormatClockFormatDefines clock format that overrides locale based format
formatDateTimeFormat"short" Controls display format.
refRef<HTMLSpanElement>Ref for the wrapping element.
value
Date |string |number 
Date as ISO8601 string, timestamp or native Date object.