Date Picker is used to select a desired date within a month. Currently, it does not cater to selecting date ranges.
Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Field label |
Mandatory textual label used to describe the form field to guide users in filling it. |
No |
|
2. Field |
Input element that allows users write in the date. |
No |
|
3. Note |
Additional description helping users provide the right input, if the field label is insufficient. |
Yes |
|
4. Icon |
Calendar icon showcasing it’s a date-specific text field. |
No |
|
5. Form Validation |
Text used when validating user form input to provide advice on fixing input errors and guiding expected input. |
Yes |
|
6. Day/month toggle |
Toggle used to change the view between choosing a day and a month. |
No |
|
7. Popover |
Container housing the date selection calendar. |
No |
|
8. Previous/next month switch |
Buttons used to navigate backwards and forwards between months. |
No |
|
9. Day/month |
Button representing a day or a month, depending on view preference. |
No |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
Date Picker has two main variants: closed and open, which control whether the calendar popover is visible. TextField states and functionality can be controlled directly in Text Field component.
Component dependencies
Text Field
Used to enter free-form text that’s no longer than one line.
Popover Basic
Popover is a temporary overlay window that contains contextual information
Help and support