<?xml version="1.0" encoding="utf-8"?>

Pickers

Pickers Bad Practice
Pickers Best Practice

Mobile offers two picker types:

  • Input pickers: For manual date entry, best for distant past/future dates (like birthdates)
  • Calendar pickers: Dialog-based selection, ideal for dates within a year of the current date to avoid excessive scrolling

Apple's alternative uses bottom-screen wheel scrollers for medium-sized lists with logical ordering.[1]

Key design principles for calendar pickers:

  • Enable clear navigation: Show all months of the current year on one screen and years on separate screens. Avoid nested dropdowns.
  • Distinguish dates: Clearly differentiate the selected date from the current date (varies by platform — Google Calendar emphasizes the current date, iOS the selected).
  • Handle invalid dates: Disable unavailable dates using a grey color or making them untappable.
Improve your UX & Product skills with interactive courses that actually work