Date pickers assist when dates are not known, set in the future, to schedule something, or assist in providing “day of the week” context.
Sizes
The date picker can be used in various sizes to match the UI direction.
Date range
In order to create a date range, two date pickers need to be used with appropriate input labels above to give context.
Established convention of layout places two date pickers side by side, with stacked date pickers also an option particularly when horizontal space is at a premium or in a responsive context.
Unavailable dates
When dates are unavailable for whatever reason, the strikethrough styling is applied. This can be for the following scenarios:
- Any one date
- Any consecutive dates
- Any multiple dates (consecutive or otherwise)
- Specific days of the week (eg Wednesdays) and/or weekends.
Error state
User experience
Ensure a label is applied to every date picker in order to provide context for users and for accessibility.
Visual design
The visual design of the calendar and the date indicators have been very carefully designed to ensure accessibility and brand alignment.
Dos and don'ts
Never use a date picker for a memorable date, ie Date of birth
Where is this available?
The GEL design System will always have the latest component versions and additions, however new components and changes to existing components may roll out to other platforms at different times.