Skip to content

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:

NameTypeDescriptionSlotA11y
timestring

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

localestring

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

format-24boolean

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

with-secondsboolean

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

formatstring

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

as-relativestring

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