Date range picker

Overview

The date range picker allows users to select a date range.

Use when

• Entering a range of dates such as time off or project span.

The date range picker allows users to manually type in a date (useful for familiar dates) or select from a calendar dropdown (useful for scheduling). The date range picker can handle formatting for manual entry on dates.

See date picker guidance for additional information around masking, validation, accessibility, and responsive behavior.

---

Related

Components

• Text fields
• The date range picker uses the calendar under the hood

Patterns

• Date pickers may be used in forms