sunweb

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]

Handlebars

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.

Handlebars


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]

Handlebars


c-date-selector > .has-error

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

Handlebars

Surname is Required
Field cannot be empty

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

Handlebars


Variants


The variant "splitted" displays the three dropdowns separated.

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

Handlebars