One of the nice new features that came out with iOS 14 were some new options around the venerable
UIDatePicker. There are now some choices other than just the slot machine-style wheels! Since iOS 2.0, the original style of UIDatePicker has been the only standard UIKit option for developers looking to let users select dates and times. The
UIDatePicker got a little bit of a facelift with the new styles in iOS 7+ but really hasn’t had much love since then. With iOS 13.4 and iOS 14.0, things changed with the addition of the
UIDatePickerStyle enumeration and the addition of two new styles other than the default wheels.
Setting UIDatePicker Style
UIDatePickerStyle enum has four options:
wheels– Shows the standard, spinning wheel style picker. (iOS 13.4+)
compact– Displays a formatted label that will show a popover with more UI when tapped. (iOS 13.4+)
inline– An editable field meant to be used inline. (iOS 14.0+)
automatic– Will pick the most appropriate style based on the mode and platform. Usually on iOS this will wind up being
wheelsbut Mac Catalyst apps might use
compactor another style. (iOS 13.4+)
While you certainly could let the UIDatePicker select the style for you with
automatic, I’d suggest manually setting the style to your preferred option to avoid unexpected UI changes with future iOS releases. Also there is no guarantee that the current default for
wheels will stay that way forever.
Setting the date picker style is as simple as changing the
preferredDatePickerStyle property on the date picker instance that you are using.
@IBOutlet var datePicker: UIDatePicker! ...code... datePicker.date = <set your date here> datePicker.mode = .dateAndTime datePicker.preferredDatePickerStyle = .inline
The above code will result in the nice new inline interface. Unfortunately the inline style takes up quite a bit of vertical space, but it does let you avoid additional UI transitions, popovers, etc. if that’s what you need.
If you want to use the compact style, it’s just a different value for
datePicker.preferredDatePickerStyle = .compact
compact style will initially present UI that looks like this.
When the user taps on the date or the time in this case, the entire calendar and time control combination appears in a popover window.
You’ll notice of course when you use it that this looks and behaves exactly like the
inline date picker style but is presented in a modal window with a translucent background.
Date and Time Only Options
The UI above all shows examples of date and time but of course you can (and most of the time) probably will just display one or the other. The Date and Time only
inline styles are basically just cropped versions of the full UI.
compact UI collapsed mode with just the date and times fit quite nicely into an existing UI with rounded text fields and definitely provide the most space-efficient option. This style also has the advantage of removing that extra label or button control that developers have had to use to trigger the existing
UIDatePicker UI in the past.
Don’t Forget About Locale
One of the major benefits of using the Apple-provided
UIDatePicker instead of trying to spin your own is out-of-the-box internationalization. By just setting the
locale property on the date picker to “zh_CN” for example, we can get a Chinese language date time picker. Cool, huh?
Not Available for Countdown Timer Mode
Note that none of these new styles are available if your
datePickerMode is set to
countdownTimer. As of iOS 14.2, setting a countdown timer date picker to
inline will actually cause a run-time app crash (I’ve submitted feedback to Apple on this so hopefully it will get resolved down the road).
Which Style Do I Pick?
Which user interface for the
UIDatePicker that you prefer is obviously up to you as an app developer. It is always most important to consider your users, what they expect as iOS users, and what will make their experience in your app the most delightful. The new
UIDatePicker options will at least let us refresh our apps and keep them up to date going forward. Apple provides some guidance in the Human Interface Guidelines (HIG) but not a ton. As always, while new UI provides us with some choices (and some compromises), which way to go on your app’s journey is up to you.