Date input - CSS Component
Attention!
The localization format of the input comes from the format settings of the client's operation system.
Browser support
Detected engine:
Chromium
Webkit
Gecko
Construction
Common API
For the basics, check the common specifications.
The CSS component uses the <label>
tag.
z-date-input
The z-date-input
parameter is the main parameter used to render the date input component.
INFO
Apart from the date
input type, you can also try the datetime-local
, month
or week
input types.
Playground
Customization
HTML Examples
Imports
html
<script type="module" src="/0.5.0/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/DateInput.css" />
Code
html
<!-- Default -->
<label z-date-input>
<span>Date input</span>
<input type="date" />
</label>
<label z-date-input="shaped">
<span>Date input</span>
<input type="date" />
</label>
<!-- With value -->
<label z-date-input>
<span>Date input</span>
<input type="date" value="2024-09-21" />
</label>
<label z-date-input="shaped">
<span>Date input</span>
<input type="date" value="2024-09-21" />
</label>
<!-- Datetime-local -->
<label z-date-input>
<span>Date input</span>
<input type="datetime-local" />
</label>
<label z-date-input="shaped">
<span>Date input</span>
<input type="datetime-local" />
</label>
<!-- Month -->
<label z-date-input>
<span>Date input</span>
<input type="month" />
</label>
<label z-date-input="shaped">
<span>Date input</span>
<input type="month" />
</label>
<!-- Week -->
<label z-date-input>
<span>Date input</span>
<input type="week" />
</label>
<label z-date-input="shaped">
<span>Date input</span>
<input type="week" />
</label>
<!-- Disabled -->
<label z-date-input>
<span>Date input</span>
<input type="date" disabled />
</label>
<label z-date-input="shaped">
<span>Date input</span>
<input type="date" disabled />
</label>
<!-- Readonly -->
<label z-date-input>
<span>Date input</span>
<input type="date" readonly value="2024-09-21" />
</label>
<label z-date-input="shaped">
<span>Date input</span>
<input type="date" readonly value="2024-09-21" />
</label>
<!-- With help text -->
<label z-date-input>
<span>Date input</span>
<small>Help text</small>
<input type="date" />
</label>
<label z-date-input="shaped">
<span>Date input</span>
<small>Help text</small>
<input type="date" />
</label>
<!-- Invalid -->
<label z-date-input>
<span>Date input</span>
<small>Invalid input</small>
<input type="date" data-invalid />
</label>
<label z-date-input="shaped">
<span>Date input</span>
<small>Invalid input</small>
<input type="date" data-invalid />
</label>