Date selector

component date selector form-element


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


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]



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]


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.

Surname is Required
Field cannot be empty


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



The variant "splitted" displays the three dropdowns separated.