Datepicker

Select a dates, time, or timezones from a visual calendar or text input

Known issues
Show details
Known issues
Published: May 22, 2023
Updated: February 21, 2024

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
🟡 Datetime Summary / Type=Datetime, Style=Select, Status=Filled (relative)

🟡 Datetime Summary / Type=Datetime, Style=Select, Status=Filled (relative)

🟡 Datetime Summary / Type=Date/Time/Tz (split), Style=Input, Status=Filled

🟡 Datetime Summary / Type=Date/Time/Tz (split), Style=Input, Status=Filled

🟡 Datetime Summary / Type=Date + Time +Tz (combined), Style=Input, Status=Filled

🟡 Datetime Summary / Type=Date + Time +Tz (combined), Style=Input, Status=Filled

🟡 Datetime Summary / Type=Datetime range, Style=Select, Status=Filled

🟡 Datetime Summary / Type=Datetime range, Style=Select, Status=Filled

🟡 Datetime Summary / Type=Date, Style=Input, Status=Filled

🟡 Datetime Summary / Type=Date, Style=Input, Status=Filled

🟡 Datetime Summary / Type=Datetime, Style=Select, Status=Filled

🟡 Datetime Summary / Type=Datetime, Style=Select, Status=Filled

🟡 Datetime Summary / Type=Datetime range, Style=Select, Status=Filled (relative)

🟡 Datetime Summary / Type=Datetime range, Style=Select, Status=Filled (relative)

🟡 Datetime Summary / Type=Time, Style=Input, Status=Filled

🟡 Datetime Summary / Type=Time, Style=Input, Status=Filled

🟡 Datetime Summary / Type=Timezone, Style=Select, Status=Filled

🟡 Datetime Summary / Type=Timezone, Style=Select, Status=Filled

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

🟢 Date Picker / Date Menu

🟢 Date Picker / Date Menu

🟢 Datetime Picker / State=Calendar

🟢 Datetime Picker / State=Calendar

The HELP link opens the related Docs page in a new tab

🟢 Datetime Picker / State=Relative (Custom)

🟢 Datetime Picker / State=Relative (Custom)

🟢 Datetime Picker / State=Relative (Presets)

🟢 Datetime Picker / State=Relative (Presets)

🟢 Date Picker / Range

🟢 Date Picker / Range

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 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 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

Is documented

The component is fully documented

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