Calendar Slider
Presets
Buttons
Default
Range
With Presets
Default
Hover
Selected
Disabled
Today
Today: Hover
Today: Selected
Focus Visible
Range: Start
Range: Middle
Range: End
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.
1. Positioning
Ensure that the calendar component is visible and is not being cut off by the side of the browser window or by the viewport of smaller breakpoints.
2. 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. ¹
3. Unavailable days
Use the calendar day button disable states to display unavailable days. Do not hide them from within the calendar.¹
Related Components
Additional Reading
The Ultimate Guide to Design a Perfect Date Picker https://uxdworld.com/2019/03/02/how-to-design-a-perfect-date-picker/