Use the Date Picker to allow users to choose either one or a number of consecutive dates
The Date Picker can trigger different native pickers that allow the user to select either a date, time, week depending on the context.
Usage
Do use the date picker to allow users to select one or more dates or even a time on a specific date.
Don’t use the Date Picker component if the user needs to select a date more than a year in the past. For example, a birth date or a past move in date. Use the Date field instead in these instances.
Do disable dates that are not selectable (e.g. past dates for future-only bookings). Prevent user error with clear affordances and restrictions.
Writing a Date Picker label
Use clear, action-oriented labels like "Start date" and "End date".
This helps users to understand exactly what the field is for.
Do align date labels with user goals (e.g. "Meter reading date" for meter read submission journeys).
Tailor to the context rather than using generic labels like ‘Date’.
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v5+ |
|
Web (@ovotech/element) |
v5+ |
|
App (@ovotech/element-native) |
v5+ |
Related