Datepicker
A visual way to choose a date using a calendar view. This is styled to look like the standard input component, but when ‘focused’ it opens a calendar where you can more easily select the date.
Examples
Default
Default Datepicker.
Labeled Datepicker
Add a label by passing the label prop to the component.
Add a helper by passing the helper prop to the component.
Mark as required by passing the required prop to the component.
Icon Datepicker
Add an icon to the left or right by passing the iconLeading or iconTrailing prop to the component, respectively.
Hint Datepicker
Add a hint by passing the hint prop to the component.
Add an icon to the hint by passing the showHintIcon prop to the component.
Preferrably before next year
Preferrably before next year
Errored Datepicker
Display in error state by passing the error prop to the component.
Combine with the hint and showHint props to show an error message.
select date in the future
Installation
Properties
In addition to default HTML properties, the Datepicker component has the following properties:
Label displayed above the Datepicker.
Additional helper text displayed to the right of the label. Only shown when label is set.
Hint text displayed to the below the Datepicker.
Toggle whether to display info icon next to the hint. Only shown when hint is set.
Toggle whether there is an error in the Datepicker. Note, this only adds a visual indicator. This also affects the
styling of the label and hint.
Classname to style the container of the Datepicker.