Date - Web Component

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

Parameters

The Web component uses the <z-date> tag:

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

Name	Type	Description
value (optional)	string	The date to be displayed in the component. If none is provided, shows the current date
weekday (optional)	string	The weekday to be displayed in the component. Possible values are: long, short and narrow.
locale (optional)	string	The locale to be used. If not set, the default locale of the browser will be used.
with-weekday (optional)	boolean	If `true`, only the weekday will be displayed.

value

The value to be displayed as a date. Make sure to use a valid date string format. If not set, the current date will be used.

weekday

You can set the weekday to be displayed in the component. Possible values are: long, short and narrow. If this attribute is set, the date will only be displayed with the weekday. If you want to display the weekday with the date, you can use the with-weekday attribute.

locale

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

with-weekday

Same as weekday attribute, the with-weekday attribute sets the weekday to be displayed in the component, the only difference is that the date will also be displayed.

Setting with-weekday="true" will display the date with the weekday in a long format as default. The format can be changed using the weekday attribute.

Playground

Customization

HTML Examples

Imports

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

Code

<z-date value="1991-09-21"></z-date>

<z-date value="1991-09-21" locale="zh"></z-date>

<z-date value="1991-09-21" weekday="short"></z-date>

<z-date value="1991-09-21" with-weekday></z-date>

<z-date value="1991-09-21" locale="es" with-weekday></z-date>