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.

Date inputDate input

INFO

Apart from the date input type, you can also try the datetime-local , month or week input types.

Date input

Date input

Date input

Playground

Customization

HTML Examples

Imports

<script type="module" src="/0.4.2/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.4.2/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.2/@zurich/css-components/DateInput.css" />

Code

<!-- 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>