Date Picker

Date Picker is an interactive component that allows users to select a date (and optionally time) from a visual calendar interface. It simplifies the process of choosing dates, improves accuracy, and ensures consistency in formatting.

Date Input

Additional information about the Date Input component can be accessed through the provided Figma link.

Breakpoints

Desktop
Tablet
The Date Picker can adapt to different mobile contexts by appearing either as a dropdown anchored to the input field or as a full-width bottom sheet modal. The dropdown variant is useful for quick selections, while the bottom sheet provides a more focused and accessible experience for date input.
Mobile bottom sheet

Types

Default
Advanced
Date Range

States

Default
1
2
3
4
5
6
7
Hover
1
2
3
4
5
6
7
Active
1
2
3
4
5
6
7
Current
1
2
3
4
5
6
7
Inactive
1
2
3
4
5
6
7
Range
1
2
3
4
5
6
7
Range Middle
1
2
3
4
5
6
7
Range End
1
2
3
4
5
6
7
Focus
1
2
3
4
5
6
7

Behavior

Selecting the month name in the header opens a month selection view, displaying all 12 months in a grid format.

After selecting a month from a month selection view, the user is taken back to the day view to complete the date selection.
Tapping the year label (e.g., 2025) within the month view transitions to a year selection view, which shows a range of years.

In the year view, navigation arrows allow users to switch between previous and next year ranges, enabling quick access to older or future years without scrolling extensively.

Dismissal

When a user selects a complete date (e.g., day, month, and year), the date picker automatically closes to confirm the selection.

Clicking or tapping outside the date picker closes it without applying a new value. This preserves the previously selected or entered date.

Pressing the Escape key dismisses the date picker immediately, canceling any in-progress selection.