DatePicker 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).
- Field label: Mandatory textual label used to describe the form field to guide users in filling it.
- Field: Input element that allows users write in the date.
- Note (optional): Additional description helping users provide the right input, if the field label is insufficient.
- Icon: Calendar icon showcasing it’s a date-specific text field.
- Form Validation (optional): Text used when validating user form input to provide advice on fixing input errors and guiding expected input.
- Day/month toggle: Toggle used to change the view between choosing a day and a month.
- Popover: Container housing the date selection calendar.
- Previous/next month switch: Buttons used to navigate backwards and forwards between months.
- Day/month: Button representing a day or a month, depending on view preference.
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
DatePicker has two main variants: closed and open, which control whether the calendar popover is visible. TextField states and functionality can be controlled directly in TextField 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