Time - Web Component ​

  • 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 the <z-time> tag:

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

NameTypeDescription
value
(optional)		string

The time to be printed. It can be a string or a timestamp. If none is provided, it will use the current one.

locale
(optional)		string

The locale to be used. If not set, the default locale of the browser will be used.

format-24
(optional)		boolean

Whether to use 24h format or not. Default: false.

with-seconds
(optional)		boolean

Whether to print the seconds or not. Default: false.

format
(optional)		string

The format to be used. Possible values: long, short, narrow.

as-relative
(optional)		string

Whether to print the time as relative to current time or not. Possible values:year, quarter, month, week, day, hour, minute, second.

value ​

The time to be printed. It can be a string or a timestamp. If none is provided, it will use the current one.

locale ​

The locale to be used. If not set, the default locale of the browser will be used.

format-24 ​

The format-24 attribute is used to define a 24h format. If format-24 attribute is set, the time will be displayed in 24h format.

with-seconds ​

The with-seconds attribute is used to define if the seconds should be displayed.

format ​

The format attribute is used to define the format of the time. Possible values are: long, short, narrow.

as-relative ​

The as-relative attribute is used to define the time as relative to the current time. Possible values are: year, quarter, month, week, day, hour, minute, second.

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.5.1/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.1/@zurich/web-components/time.js"></script>
Code
html
<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>