Date Picker
Date pickers allow users to select a date or a range of dates. Material Design 3 provides modal, docked, and input-based date picker variants.
Date Input Field
A text field with a calendar icon that opens the date picker when clicked.
Modal Date Picker
The modal date picker displays a full calendar interface for date selection.
Docked Date Picker
A compact date picker that appears below the input field.
January 2024
S
M
T
W
T
F
S
Brand Properties
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| headerBackground | color | #6750A4 | #038012 | #1A5129 |
| selectedDateBackground | color | #6750A4 | #038012 | #1A5129 |
| selectedDateTextColor | color | #FFFFFF | #FFFFFF | #FFFFFF |
| dayTextColor | color | #1D1B20 | #038012 | #1A1A1A |
| dayLabelColor | color | #49454F | #666666 | #4A4A4A |
| modalBorderRadius | string | 28px | 12px | 12px |
| dockedBorderRadius | string | 12px | 8px | 8px |
| daySize | string | 40px | 40px | 40px |
| actionButtonColor | color | #6750A4 | #038012 | #1A5129 |
| shadowElevation | string | 0 8px 24px rgba(0,0,0,0.15) | 0 10px 15px rgba(0,0,0,0.1) | 0 10px 15px rgba(0,0,0,0.1) |
Usage Guidelines
- Use modal date pickers for important date selections that require user focus
- Use docked date pickers for inline forms where context switching should be minimized
- Always provide a text input as an alternative for users who prefer typing
- Support common date formats based on locale
- Clearly indicate the selected date in the calendar view