Date Picker
Date pickers allow users to select a date from a calendar.
- Can contain leading or trailing indicator icons
- Two sizes: small and large
- Keep headings concise and short
- Content should be concise and scannable
Single Date Picker
For selecting a single date.
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
29 | 30 | 31 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 1 |
Jan | Feb | Mar | Apr |
May | Jun | Jul | Aug |
Sep | Oct | Nov | Dec |
2019 | 2020 | 2021 | 2022 |
2023 | 2024 | 2025 | 2026 |
2027 | 2028 | 2029 | 2030 |
Date Range Picker
For selecting a range of dates. This is useful for selecting a start and end date.
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
29 | 30 | 31 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 1 |
Jan | Feb | Mar | Apr |
May | Jun | Jul | Aug |
Sep | Oct | Nov | Dec |
2019 | 2020 | 2021 | 2022 |
2023 | 2024 | 2025 | 2026 |
2027 | 2028 | 2029 | 2030 |
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
- Use cases:
- Selecting a single date
- Selecting a range of dates
- Choosing a date that might be unknown by the user
Single Date Picker
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
29 | 30 | 31 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 1 |
Jan | Feb | Mar | Apr |
May | Jun | Jul | Aug |
Sep | Oct | Nov | Dec |
2019 | 2020 | 2021 | 2022 |
2023 | 2024 | 2025 | 2026 |
2027 | 2028 | 2029 | 2030 |
Generally, use a single date picker when the user needs to select a single date.
Range Date Picker
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
29 | 30 | 31 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 1 |
Jan | Feb | Mar | Apr |
May | Jun | Jul | Aug |
Sep | Oct | Nov | Dec |
2019 | 2020 | 2021 | 2022 |
2023 | 2024 | 2025 | 2026 |
2027 | 2028 | 2029 | 2030 |
Use a range date picker when the user needs to select a range of dates.
Responsive Layouts
Datepickers are not mobile-friendly by default. If you need to use a datepicker on mobile, consider swapping between native select inputs (i.e. month, day, and year) and a datepicker based on the screen size.
On this page
import { DatePicker, DatePickerLabel, DatePickerInput, DatePickerCalendar,} from '@cerberus/react'Usage
Single Date Picker
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
29 | 30 | 31 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 1 |
Jan | Feb | Mar | Apr |
May | Jun | Jul | Aug |
Sep | Oct | Nov | Dec |
2019 | 2020 | 2021 | 2022 |
2023 | 2024 | 2025 | 2026 |
2027 | 2028 | 2029 | 2030 |
Date Range Picker
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
29 | 30 | 31 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 1 |
Jan | Feb | Mar | Apr |
May | Jun | Jul | Aug |
Sep | Oct | Nov | Dec |
2019 | 2020 | 2021 | 2022 |
2023 | 2024 | 2025 | 2026 |
2027 | 2028 | 2029 | 2030 |
Using Default Values
You can set the default values for the range date picker by passing the defaultValue prop to the RangePickerInput component in the form of an Array of two date strings.
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
29 | 30 | 31 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 1 |
Jan | Feb | Mar | Apr |
May | Jun | Jul | Aug |
Sep | Oct | Nov | Dec |
2019 | 2020 | 2021 | 2022 |
2023 | 2024 | 2025 | 2026 |
2027 | 2028 | 2029 | 2030 |
Customization
You can utilize the primitive components to customize the date picker.
| Component | Description |
|---|---|
| DatePicker | The main container for the date-picker items. |
| DatePickerLabel | The label for the date-picker. |
| DatePickerTrigger | The trigger for the date-picker. |
| DatePickerInput | The input field and trigger for the date-picker. |
| DatePickerView | The container (view) of the calendar. |
| DatePickerViewControl | The triggers that update the calendar in the view. |
| DatePickerTable | The table that contains the calendar. |
| DatePickerTableHead | The header of the calendar table. |
| DatePickerTableBody | The body of the calendar table. |
| DatePickerTableRow | The row of the calendar table. |
| DatePickerContent | The content of the calendar cell. |
| RangePickerInput | The input field for the range date-picker. |
| DatePickerCalendar | An abstraction of the calendar components. |
| DatePickerDayView | An abstraction of the view of the days in the calendar. |
| DatePickerMonthView | An abstraction of the view of the months in the calendar. |
| DatePickerYearView | An abstraction of the view of the years in the calendar. |
API
The DatePicker shares the same API as the Ark DatePicker.
On this page
Use Cases
- Users should be able to:
- Navigate to and activate dates with assistive tech (i.e., focus)
Interaction & Style
Similarly styled components shouldn't be used together if they don't each pass the 3:1 contrast ratio. Higher contrast helps differentiate between a group of similar components.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) dates |
| Space / Enter | Activates the (non-disabled) dates |
On this page