Range fill color

The range fill shows which days fall between two selected dates. If the range spans more than the three-month calendar view, it ends on the last visible day but continues as users navigate with the calendar chevrons. A dashed stroke outlines the fill to improve visibility on bright screens and for users with vision impairments.

Do not change the styling of unavailable days

The strikethrough styling intentionally accommodates internationalization.

Calendar popover states

The calendar popover supports a disabled state but not a read-only state. Dates or months may be temporarily disabled based on context (for example, if a user must complete a task before selecting a date). In these cases, help text can explain why certain dates are unavailable.

If a date picker is truly read-only, users shouldn't be able to open the calendar popover at all, since they can't interact with it.

Optional time fields

The calendar popover can also include time-specific fields, allowing users to specify start and end times.