components / Actions and Inputs

Date Range Picker

States

Default

Placeholder

Error

For each input, errors for exceeding min or max date is handled internally using a tooltip. For errors that are external, use Form.DateRangePicker's error prop to pass in error and the message.

Required

Disabled

Options

In the use cases where frequently used ranges are determined, preset options can be used to speed up selection for the users.

Default

Options that are out of range

The options that are out of min max range will be disabled. This example has the same options with min and max date set to only make first option - Last 7 Days - in range.

Label

Labels can have a help icon with a tooltip to provide additional context to a label.

Help

Required and Optional

A visual indicator can be applied on a Date Picker's label.

Multiple Calendar View


Accessibility

The user should be able to choose a date by typing into the start and end date input or by selecting a date from the calendar. The user should be able to use either method.

Keyboard Support

  • When focus is on the trigger, press space to open and escape to close the calendar.
  • When picker is open, use tab / shift + tab to change focus between inputs, calendar, and options.
  • When focus is on the calendar:
    • use the arrow keys to traverse through dates
    • use enter to select a date
    • use space to apply, when Apply button is enabled
    • use page up and page down to change months
    • use cmd + page up and cmd + page down to change the view scope between month, year, and decade.

Content Guidelines

Most of the content guidelines from Forms applies to the Date Picker.

Use a label for all input fields

A label is a short, meaningful description that clearly indicates what the user is expected to enter. Labels should be 1 to 3 words and written in title case. Labels should primarily be nouns. Avoid using labels as CTAs. A label is not inline help and shouldn’t be used to provide instruction.

Follow capitalization rules

Input labels should be written in title case.

Show hints, formatting, and requirements

Inline help should explain the situation for needing a date range.


Best Practices

  • Set minDate and maxDate to reduce user mistakes.

Components

Patterns

  • Form design pattern for how related controls are ordered.

Importing

import { DateRangePicker } from '@servicetitan/design-system';