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
components/time.json
{
"name": "Time",
"tagName": "noora-time",
"elementClassName": "NooraTime",
"className": "noora-time",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Formats an absolute or relative date and time.",
"usage": "<noora-time datetime=\"2026-07-27T09:00:00Z\"></noora-time>",
"attributes": [
{
"name": "datetime",
"property": "datetime",
"type": "string",
"description": "Sets an international date and time string."
},
{
"name": "show-time",
"property": "showTime",
"type": "boolean",
"default": false,
"description": "Includes the localized time."
},
{
"name": "relative",
"property": "relative",
"type": "boolean",
"default": false,
"description": "Shows a relative time label."
}
],
"readonlyProperties": [],
"slots": [],
"cssParts": [
{
"name": "time",
"description": "The native time element."
}
],
"notes": [],
"examples": [
{
"id": "formats",
"title": "Display formats",
"description": "Show a date, a date with time, or a relative label.",
"markup": "<noora-time datetime=\"2023-01-01T12:00:00Z\"></noora-time>\n<noora-time datetime=\"2023-01-01T12:00:00Z\" show-time></noora-time>\n<noora-time datetime=\"2023-01-01T12:00:00Z\" relative></noora-time>"
},
{
"id": "times-of-day",
"title": "Different times",
"description": "Format morning, evening, midnight, and noon values.",
"markup": "<noora-time datetime=\"2023-06-15T08:30:00Z\" show-time></noora-time>\n<noora-time datetime=\"2023-06-15T19:45:00Z\" show-time></noora-time>\n<noora-time datetime=\"2023-06-15T00:00:00Z\" show-time></noora-time>\n<noora-time datetime=\"2023-06-15T12:00:00Z\" show-time></noora-time>"
},
{
"id": "relative",
"title": "Relative times",
"description": "Show relative labels with absolute tooltips.",
"markup": "<noora-time datetime=\"2023-01-01T11:58:00Z\" relative></noora-time>\n<noora-time datetime=\"2022-12-31T12:00:00Z\" relative></noora-time>\n<noora-time datetime=\"2022-12-25T12:00:00Z\" relative></noora-time>\n<noora-time datetime=\"2022-01-01T12:00:00Z\" relative></noora-time>"
},
{
"id": "special-dates",
"title": "Special dates",
"description": "Handle new year, leap day, and distant-future dates.",
"markup": "<noora-time datetime=\"2024-01-01T00:00:00Z\" show-time></noora-time>\n<noora-time datetime=\"2024-02-29T12:00:00Z\"></noora-time>\n<noora-time datetime=\"2030-12-31T23:59:59Z\" show-time></noora-time>"
}
]
}