Calendar picker.
Presents selectable dates in a month grid.
See it in context
What it is
The calendar grid makes weekdays, weeks, and nearby dates visible together. Month navigation and distinct states for today, selection, and unavailable dates help people orient themselves.
When to use it
Provide clear month navigation and distinguish selected, current, and unavailable dates.
Know the difference
A date picker is the broader input pattern; a calendar picker is its month-grid presentation.
Across platforms
Web
Native input and select controls use browser-provided picker UI; the exact presentation differs across browsers and devices.
iOS · iPadOS
Pickers can appear inline, as wheels, or inside a compact presentation. Choose a style that fits the amount of space and the value being selected.
Android
Use the Android or Material selector appropriate to the value. Calendar and time selection commonly have dedicated dialog presentations.
Go to the source
Primary documentation for the pattern and its platform conventions.