Time
Timestamps can be absolute or relative:
Absolute time: prints the given time in a localized way. (e.g. 9:27 PM) Relative time: prints the relative time between the current time (when the component is rendered) and the given one in a short sentence. Works for past and future (e.g. “25 minutes ago” or “in 10 hours”).
When to use
Use absolute timestamps when users need a specific date and time for when an event occurred or will occur.
Use relative timestamps when the accuracy of the date and time is not important, and users only need to get a quick idea of how far in time the event occurred or will occur.
Specifications
You can use the min and max attributes to restrict the valid times that can be chosen by the user
In relative timestamps:
Time can be displayed in seconds, minutes, hours, day, week, month, quarter, year.
Consider converting the units of relative timestamps once time passes (e.g. “72 hours ago” would be more difficult to understand for users than “3 days ago”).
| Time frame | Unit |
|---|---|
| 0-59 seconds | Now |
| 1-59 seconds | # minutes ago |
| 1-24 hours | # hours ago |
| 1-31 days | # days ago |
| 1-4 weeks | # weeks ago |
| 1-12 months | # months ago |
| More than 12 months | # years ago |
In absolute timestamps:
Time can be displayed in 24h or 12h formats, based on system locale. Seconds are optionally to display.
Format
In addition to the time, you can display the weekday either in long (e.g. Monday), short (e.g. Mon), or narrow (e.g. M) formats.
For detailed information about Time, read <input type="time"/>
From Figma to code
...
Customization
INFO
Check everything about the customization mechanics in the How it works documentation.
...