Date input - Web Component
...
Attention!
The localization format of the input comes from the format settings of the client's operation system.
Browser support
Parameters
The Web component uses a <z-date-input>
tag.
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|---|---|
config | string | The main parameter has two components following the pattern:
|
label | string | Label of the input |
readonly (optional) | boolean | Transforms the input into an output |
value (optional) | string | Value of the model |
disabled (optional) | boolean | Blocks the interaction with the input component. |
required (optional) | boolean | Marks the input component as required. |
name (optional) | string | Identification for the field inside the form |
invalid (optional) | boolean | The forced state for set the input as invalid |
help-text (optional) | string | The forced message to be shown under the input |
type | string | Type of input. Possible values are:
|
The events emitted from the component are:
Name | Payload | Description |
---|---|---|
onchange | string | Returns the new value of the "value" attribute |
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.3.7/@zurich/web-components/styles.css" />
<script type="module" src="/0.3.7/@zurich/web-components/date-input.js"></script>
Code
html
<!-- Default -->
<z-date-input label="Date input"></z-date-input>
<z-date-input label="Date input" config="shaped"></z-date-input>
<!-- with value -->
<z-date-input label="Date input" value="2024-09-21"></z-date-input>
<z-date-input label="Date input" value="2024-09-21" config="shaped"></z-date-input>
<!-- datetime-local -->
<z-date-input label="Date input" type="datetime-local"></z-date-input>
<z-date-input label="Date input" type="datetime-local" config="shaped"></z-date-input>
<!-- month -->
<z-date-input label="Date input" type="month"></z-date-input>
<z-date-input label="Date input" type="month" config="shaped"></z-date-input>
<!-- week -->
<z-date-input label="Date input" type="week"></z-date-input>
<z-date-input label="Date input" type="week" config="shaped"></z-date-input>
<!-- disabled -->
<z-date-input label="Date input" disabled></z-date-input>
<z-date-input label="Date input" disabled config="shaped"></z-date-input>
<!-- readonly -->
<z-date-input label="Date input" readonly value="2024-09-21"></z-date-input>
<z-date-input label="Date input" readonly value="2024-09-21" config="shaped"></z-date-input>
<!-- with help text -->
<z-date-input label="Date input" help-text="Help text"></z-date-input>
<z-date-input label="Date input" help-text="Help text" config="shaped"></z-date-input>
<!-- invalid -->
<z-date-input label="Date input" help-text="Invalid input" invalid></z-date-input>
<z-date-input label="Date input" help-text="Invalid input" invalid config="shaped"></z-date-input>