Is documented
The component is fully documented
Known issues
Show details
Overview
Datepickers allow marketers to select dates conveniently in activities like scheduling and planning content, running reports, and configuring settings.
Design
Summaries
These components summarize the date/time/range that's set for the field.
- Clicking on these components will call up their corresponding "Pickers"
- Any updates made in the Pickers are immediately reflected in the label of these Control components
Datepicker
Secondary components that allow users to select the date/time/timezone they want. They appear once a corresponding "Summary" has been clicked.
Structure/variants
Guidelines
Use cases
- Use the Datepicker component whenever marketers need to input dates for scheduling campaigns, events, or other activities.
- Implement the component in forms, scheduling interfaces, or anywhere marketers need to specify dates or date ranges.
Do
- Do provide clear visual feedback when dates are selected, indicating the chosen dates prominently
- Do offer options for customizing date formats and range selection to accommodate different date input requirements
- Do consider the context of use and tailor the Datepicker component accordingly, such as including time selection options for scheduling tasks with specific time constraints
Don't
- Don't overload the Datepicker with unnecessary features or complexity that may confuse marketers or clutter the interface
- Don't limit the Datepicker's usability by restricting date formats or range selection options without valid reasons
- Don't neglect to test the Datepicker across different devices and screen sizes to ensure optimal usability and responsiveness
Content
- The Datepicker component should include clear instructions or tooltips to guide marketers on how to use the interface effectively.
- Provide informative labels for date selection controls and ensure that any additional features, such as time selection, are clearly explained.
Accessibility
To ensure accessibility, follow these guidelines:
- Use semantic HTML elements and ARIA attributes to enhance screen reader compatibility and provide context for date selection.
- Ensure that the Datepicker is navigable using keyboard controls, allowing marketers to select dates without relying solely on mouse interactions.
- Provide sufficient color contrast and visual indicators for selected dates to assist marketers with low vision or color vision deficiencies.
- Test the Datepicker with assistive technologies and screen readers to verify its accessibility and usability for marketers with disabilities.
Health
Accessibile
Tested against WCAG 2.1 AAA accessibility guidelines
Tokens
This component uses tokens in both Figma and code
Figma component
Includes a link to a Figma component that has been imported to Supernova
Storybook
Includes a link to an external code repository
-
Status
The component has a health status indicated
Known issues