Time

Formats an absolute or relative date and time.

html

<noora-time datetime="2026-07-27T09:00:00Z"></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

Part	Description
`time`	The native time element.

Display formats

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

html

<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.

html

<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.

html

<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.

html

<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>