Time

...

• Absolute time: prints the given time in a localized way.
• Relative time: prints the relative time between the current time (when the component is rendered) and the given one in a short sentence. Works for past and future.

Parameters

The Web component uses a <z-time> tag.

Content

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description
value	string	the time to be printed. It can be a string or a timestamp.
format-24	boolean?	Whether to use 24h format or not. Default: false.
with-seconds	boolean?	Whether to print the seconds or not. Default: false.
format	string	The format to be used. Possible values: long, short, narrow.
as-relative	string	Whether to print the time as relative to current time or not. Possible values:year, quarter, month, week, day, hour, minute, second.

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.3.6/@zurich/web-components/styles.css" />
<script type="module" src="/0.3.6/@zurich/web-components/time.js"></script>

Code

<z-time value="2024-03-01T04:20"></z-time>
<z-time value="04:20"></z-time>
<z-time value="2024-03-01T04:20:55.000Z" format-24 with-seconds></z-time>
<z-time value="04:20:55" with-seconds locale="zh"></z-time>
<z-time value="1991-09-21" as-relative="year"></z-time>
<z-time value="2030-09-21" as-relative="week" locale="es"></z-time>