Timestamp
| Status | stable |
| Published | 2.0.0 |
This document is a work in progress.
You can take a look, but nothing in here is set in stone.
Use the Timestamp component to indicate when an action or resource event took place. It can be rendered inline within text, or as a standalone element.
On hover, a popup appears that provides the full timestamp (excluding seconds). This is useful when a user needs the exact timestamp for other purposes. This is a standard tooltip that should appear on hover and immediately disappear on lost hover; the tooltip is non-interactive.
| Default | Specificity: Day | |
| Page load | ||
| Start of today | ||
| -24hr | ||
| +24hr |
<jds-locale-provider :locale="locale">
<table>
<tr>
<td></td>
<td>Default</td>
<td>Specificity: Day</td>
</tr>
<tr>
<td>Page load</td>
<td><jds-timestamp :time="pageLoad"/></td>
<td><jds-timestamp :time="pageLoad" specificity="day"/></td>
</tr>
<tr>
<td>Start of today</td>
<td><jds-timestamp :time="startOfDay"/></td>
<td><jds-timestamp :time="startOfDay" specificity="day"/></td>
</tr>
<tr>
<td>-24hr</td>
<td><jds-timestamp :time="yesterday"/></td>
<td><jds-timestamp :time="yesterday" specificity="day"/></td>
</tr>
<tr>
<td>+24hr</td>
<td><jds-timestamp :time="tomorrow"/></td>
<td><jds-timestamp :time="tomorrow" specificity="day"/></td>
</tr>
</table>
</jds-locale-provider>Variants
<jds-timestamp time="2020-08-04T06:30:58+00:00" relative />JdsTimestamp
Props
| Prop | Value | Default | |
| time | string | none | Any moment-compatible value, but ideally an ISO8601-compatible string. |
| relative | boolean | false | |
| shortRelative | boolean | false | |
| specificity | minuteday | 'minute' | Determines the smallest unit we show. It may not be relevant for a timestamp to show a hours and minutes if it's only referring to a specific day, for example. |