Time
Time can display duration, dates and points in time.
Examples
Usage
Ago displays the amount of time since something happened, and doesn't update second by second. Here are the different output string formats based on whether you're using the compact or extended versions of the format prop.
| Compact | Extended | |
|---|---|---|
| 0s - 1m 59s | Just now | Just now |
| 2m - 59m | 3m ago | Today at 2:30 PM |
| Today | 6h ago | Today at 2:30 PM |
| Yesterday | Yesterday | Yesterday at 2:30 PM |
| Last 7 days | Tuesday | Tue at 2:30 PM |
| Current Year | May 12 | May 12 at 2:30 PM |
| Past years | May 12, 2015 | May 12, 2015 at 2:30 PM |
Duration displays how long an ongoing process has been running, and updates every second. Here are the different output formats based on the delta between the two provided times.
| Time Displayed | |
|---|---|
| <1s | <1s |
| <1m | 4s |
| <1h | 2m 25s |
| <1d | 3h 24m 5s |
| >1d | 4d 6h 5m |
APIs
ITimeProps
ariaHidden
boolean
Optional aria-hidden
ariaLabel
string
Addtional label for the time. First part of the label is the datetime.
className
string
Custom className applied to the <time> or <span> element
dateTime
Date
The date time that will be machine readable.
getNextIntervalrequired
() => number
Reference to the function which returns time interval before next refresh.
getTimeStringrequired
() => string
The reference to function which returns a string to display.
tabIndex
number
tabIndex for time
IAgoProps
ariaLabel
string
Assitional label for ago. First part of the label is the ago value itself.
Defaults to the content of the base tooltip.
className
string
Custom className applied to pass to the <Time> component
currentDate
Date
Current date to compare date with
daterequired
Date
The date object for which Duration string is required.
format
AgoFormat
The format in which Duration string is required (default compact).
locale
string
Locale for Ago
tabIndex
number
tabIndex for Ago
tooltipProps
Tooltip props that, if provided, will override the standard tooltip built
by the component based on the start time.
If no tooltip is desired, pass null.
If the standard tooltip is desired, don't use this prop or pass undefined.
tooltipTimeFormat
Intl.DateTimeFormatOptions
Time format for tooltip to override default date format
IDurationProps
ariaHidden
boolean
Optional aria-hidden
ariaLabel
string
Addtional label for the duration. First part of the label is duration itself.
Defaults to the content of the base tooltip.
className
string
Custom className applied to pass to the <Time> component
endDate
Date
The end date object for which Duration string is required.
startDaterequired
Date
The start date object for which Duration string is required.
tabIndex
number
tabIndex for ago
tooltipProps
Tooltip props that, if provided, will override the standard tooltip built
by the component based on the start time.
If no tooltip is desired, pass null.
If the standard tooltip is desired, don't use this prop or pass undefined.