The Date Picker is used to select a desired date within a month, either by entering a date in the input field or selecting a date from the calendar.
Date Picker does not currently cater to selecting date ranges. The Frontend Foundations Team plans to implement a DateRangePicker at a later date. In the meantime, if necessary, two Date Pickers can be placed next to each other to create a date range picker. See Usage for further guidance.
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. Required or optional marker |
Textual label for DatePicker used to denote if a field is required or optional. Marker’s copy is not changeable. |
Yes |
|
3. Popover trigger |
Used to display a Popover with more content explaining the context of a field. Used when helper text is not sufficient. |
Yes |
|
4. Helper text |
Additional DatePicker description helping users provide the right input, if the field label is insufficient. |
Yes |
|
5. Date input |
Users can manually type the date or use the calendar button to select from the Date Popover. |
No |
|
6. Calendar input |
Triggers the Date Popover (calendar) below the date input field. |
No |
|
7. Month Year Selector |
Used to open a native menu to separately select the month and year. |
No |
|
8. Forward and back buttons |
Navigates back and forward through consecutive months. |
No |
|
9. Days of the week |
Represents each day of the week from Sunday through to Saturday. |
No |
|
10. Day outside current month |
Indicates days from previous or next month. These are also interactive. |
No |
|
11. Today’s date |
Today’s date. |
No |
|
12. Selected month’s date |
A date from the selected month. |
No |
|
13. Selected date |
The date the user has selected. |
No |
|
14. Date Popover |
Calendar (triggered by the calendar button) that displays controls to select a date without requiring manual text input. |
No |
|
15. Form validation |
Icon and text used when validating user form input to provide advice on fixing input errors and confirmation when they are addressed. |
Yes |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| state Variant | rest | focus | active | disabled | read-only | rest |
| isOpen Variant | false | true | false |
| validation Variant | neutral | error | neutral |
Component dependencies
This component is internally dependent on the following form sub-components:
|
Figma |
Code |
|---|---|
|
formElement.labelGroup |
Legend |
|
formElement.input |
Input |
|
formElement.validation |
InputError |
|
formElement.DatePopover |
Popover and react-day-picker (third party library) |
Figma sub-components
It’s also dependent on:
Help and support