Content
1
Consistent
Preset options should be consistently formatted. Use numerals (1, 2, 5) instead of spelling out numbers to save space. Use sentence case.
Do
Last 7 days
Last 3 months
Don't
Last seven days
Last 12 Months
Anatomy
Calendar Slider
Presets
Buttons
Variants
Default
Range
With Presets
States
Default
Hover
Selected
Disabled
Today
Range
Behaviors
Month & Year Selectors
Month and year selectors allow users to navigate or select across large date ranges more easily.
Month Select
Year Select
Slide Animation
The calendar uses a --anim-ease-in-out --anim-duration-md animation to help users better understand the direction of movements within the calendar.
Best Practices
1
Range with Presets
Use the Calendar with presets variant to provide a list of common date ranges. This list should be short and should not include unnecessary options that will confuse the user. ¹
Do
Don't
Unavailable days
Use the calendar day button disable states to display unavailable days. Do not hide them from within the calendar.¹
Do
Don't
More
Related Pages
Additional Reading
The Ultimate Guide to Design a Perfect Date Picker https://uxdworld.com/2019/03/02/how-to-design-a-perfect-date-picker/