Date input - CSS Component
Attention!
The localization format of the input comes from the format settings of the client's operation system.
Browser support
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.3.7/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.7/@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>