How to use this component
<i80-time> shows a date in a consistent format, and renders a real <time datetime="…"> so the
date stays machine-readable whatever it says on screen. Pass a date a browser can parse — an
ISO 8601 string is safest — or write the <time datetime="…"> yourself inside the tag, in which
case that element is the date and the one the tag goes on using, so a server-rendered page reads
correctly before i80.js has loaded.
Basic invocation with default time format display
Without a display, dates are shown in either a “friendly local” or a “relative” format: within
one week of now, the relative format.
The “friendly local” format includes the abbreviated month name and the time of day along with
the local timezone. A Tooltip is also included, which by default shows the
time in ISO UTC format. Set tooltip="false" to turn it off, which also removes the button the
tooltip needs.
Dates are formatted by the browser in the reader's own locale, and a relative time re-reads itself every second while it is on the page.
The component does not include text styling, so it inherits the text styles of the context it is used in.
Single time
<i80-text tag="p"><i80-time date="2021-11-29T09:30:00"></i80-time></i80-text>Time range
In addition to single dates, start and end show a range as one line, with the year mentioned
once when both ends share it.
<i80-text tag="p"><i80-time start="2024-10-14" end="2024-10-16"></i80-time></i80-text>Display
Use display to ask for a specific format: “friendly-relative”, “friendly-only” and
“friendly-local”, or just “relative” or “utc”. See the
Date and time writing guidelines for when to use each.
<i80-text tag="p">
Registration closed <i80-time date="2024-10-16" display="relative"></i80-time>.
</i80-text>Attributes
<i80-time> renders this component. Everything it understands:
| Attribute | Values | Default | Notes |
|---|---|---|---|
date |
date | Anything the browser parses: an ISO string is safest. | |
start |
date | With end: a range, said as one line with the year mentioned once. | |
end |
date | ||
display |
friendly-relative · friendly-local · friendly-only · relative · utc | friendly-only is the date, friendly-local adds the time and zone, relative is “3 days ago”, friendly-relative is both, utc is the ISO string. Left out: relative inside a week, friendly-local past it. | |
tooltip |
boolean | true |
The precise date in a tooltip on the time. tooltip="false" leaves the text on its own, with no button around it. |
The tag keeps any native element you write inside it, so a server-rendered form, link or button works as it is. See Web Components for loading i80.js and the reference for these examples running.
Conformance rating
When used as recommended, there should not be any WCAG conformance issues with this component.
Applicable WCAG Success Criteria
This section is for reference only. This component intends to conform to the following WCAG Success Criteria:
-
1.3.1
Info and Relationships (Level A):
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. -
1.3.2
Meaningful Sequence (Level A):
When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. -
2.1.1
Keyboard (Level A):
All functionality of the content is operable through a keyboard interface. -
2.4.7
Focus Visible (Level AA):
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. -
4.1.2
Name, Role, Value (Level A):
For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
Support
If any accessibility issues have been found within this component, let us know by submitting an issue.
0.1.0
Første i80-version (fork af upstream, se core/UPSTREAM.md).
