Definition
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).
Handlebars
Razor
Open in new tabIf 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
Date selector with info tooltip
Handlebars
Razor
Open in new tabJavascript
States
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
The error state let the user know that the filled information has an error.
Handlebars
Javascript
Modifiers
The Date selector component has the modifier "block" which displays the component itself using the whole width of its parent.
Variants
The variant "splitted" displays the three dropdowns separated.