eliza

Date selector

component date selector form-element

Definition


The Date selector component lets the user choose a date, splitting the data between day, month and year.

.c-date-selector

We can set optional parameters like default, minimum and maximum date, or even the month mode (default or short i.e.: December-Dec).

.c-date-selector [minDate=2017-05-06], [maxDate=2018-05-06], [date=2018-01-01]

Handlebars

Loading...

If the range of min-max date is short enough that only occupies days of one month, for example, the dropdown will be contraint to that month

.c-date-selector [minDate=2017-05-06], [maxDate=2017-05-22]

Date selector with info tooltip

.c-date-selector tooltip

Handlebars

Loading...

Javascript

Loading...

States


c-dropdown > .is-disabled

The disabled state blocks the users interaction and modifies the appearance to let them know that edition is not possible.


There is support for validation through the "validate()" function. In case a date is wrong, this is how it will look like

.c-date-selector [invalid]

c-date-selector > .has-error

The error state let the user know that the filled information has an error.

Handlebars

Date required

Javascript

Loading...

Modifiers


The Date selector component has the modifier "block" which displays the component itself using the whole width of its parent.

.c-date-selector.c-date-selector--block

Variants


The variant "splitted" displays the three dropdowns separated.

.c-date-selector.c-date-selector--splitted