| Name | Description | Default | Type |
|---|---|---|---|
variant* | Controls date time variant. | | DateTimeVariant |
className | Additional CSS classes. | | string |
clockFormat | Defines clock format that overrides locale based format | | ClockFormat |
format | Controls display format. | "short" | DateTimeFormat |
ref | Ref for the wrapping element. | | Ref<HTMLSpanElement> |
value | Date as ISO8601 string, timestamp or native Date object. | | string |number |Date |
DateTimeDisplay
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
The DateTimeDisplay component renders any aspect of a dates or time in a large variety of formats.
Date Time
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.
Example
Duration
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.