Time - Web Component

The Time component can be used imported from:

Playground

• 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:

By default, all the parameters are optional or can be set in different, except for the ones marked as required

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

Name	Type	Description	Slot	A11y
time	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	string	The locale to be used. If not set, the default locale of the browser will be used.
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.

Parameters use

time

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

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

Flags

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.

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.

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

HTML Examples

CodeSandbox example