Skip to content

Date input - CSS Component

The DateInput component can be used imported from:

Playground

Construction

Attention!

The localization format of the input comes from the format settings of the client's operation system.

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.


Attention!

Firefox and Safari do not support type="month" nor type="week". For type="datetime-local" both don't show a time picker natively.

Special uses

datetime-local workaround

Since Firefox and Safari do not fully support the datetime-local input type, we can use the DateInput and TimeInput components together to achieve almost the same result and then having independent controls:

Date time input

Browser support

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples

CodeSandbox example