<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->

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