Time

Formats an absolute or relative date and time.

Time web component

Formats an absolute or relative date and time.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Display formats

Show a date, a date with time, or a relative label.

<noora-time datetime="2023-01-01T12:00:00Z"></noora-time>
<noora-time datetime="2023-01-01T12:00:00Z" show-time></noora-time>
<noora-time datetime="2023-01-01T12:00:00Z" relative></noora-time>

Different times

Format morning, evening, midnight, and noon values.

<noora-time datetime="2023-06-15T08:30:00Z" show-time></noora-time>
<noora-time datetime="2023-06-15T19:45:00Z" show-time></noora-time>
<noora-time datetime="2023-06-15T00:00:00Z" show-time></noora-time>
<noora-time datetime="2023-06-15T12:00:00Z" show-time></noora-time>

Relative times

Show relative labels with absolute tooltips.

<noora-time datetime="2023-01-01T11:58:00Z" relative></noora-time>
<noora-time datetime="2022-12-31T12:00:00Z" relative></noora-time>
<noora-time datetime="2022-12-25T12:00:00Z" relative></noora-time>
<noora-time datetime="2022-01-01T12:00:00Z" relative></noora-time>

Special dates

Handle new year, leap day, and distant-future dates.

<noora-time datetime="2024-01-01T00:00:00Z" show-time></noora-time>
<noora-time datetime="2024-02-29T12:00:00Z"></noora-time>
<noora-time datetime="2030-12-31T23:59:59Z" show-time></noora-time>

Attributes

Attribute	Type or allowed values	Default	Description
`datetime`	string	`None`	Sets an international date and time string.
`show-time`	boolean	`false`	Includes the localized time.
`relative`	boolean	`false`	Shows a relative time label.

Styling parts

Name	Description
`time`	The native time element.