Date Pickers — HIG Playground

Explore three iOS Date Picker styles interactively. Change Compact, Wheel, and Graphical styles with various component combinations in the control panel to see changes reflected instantly on the iPhone screen.

9:41

●●●● WiFi 🔋

Date Pickers

⚠️ HIG Violation: Improper date picker

📚 HIG Guidelines — Try It Yourself

✓ Do — Good Example

✗ Don't — Bad Example

✓ Do This

Use Compact style in space-constrained areas like forms and list rows
Use Graphical style when users need to see surrounding dates for context
Use Wheel style when a familiar, quick-scroll experience is preferred
Set sensible minimum and maximum date ranges
Show only the components (date, time) relevant to the task

✗ Don't Do This

Don't use Wheel style when screen space is limited
Don't mix different picker styles in the same form
Don't hide the date picker behind extra taps if date selection is the primary task
Don't use Graphical style for time-only selection

👆 See the bad pattern in the iPhone preview above

Components

Date Only

Date & Time

Time Only

SwiftUI Code