Date - Web Component โ
Browser support โ
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: |
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
html
<link rel="stylesheet" href="/0.4.2/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.2/@zurich/web-components/date.js"></script>
Code
html
<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>