Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
docs/components/time.md
<!-- 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>
```