How To Best Show A Date Picker and Time Picker on IOS?


#1

I don’t have an IOS device so unfamiliar with how they usually function…

How do I display a date picker + time picker when selecting one of the two buttons below?

image

When I put a date picker on the page it looks like this:

image

I assumed it would look like the native popup on Android OS. Is there a practice to good UX on the placement of the picker?


#2

There are some thoughts surrounding how Pickerviews are integrated via Apple’s Human Interface Guidelines but I also think there’s room to grow and adapt to the context of the app.

Have a look here and if you’d like to ideate/brainstorm a bit on it in this thread, I’m happy to participate in the discussion. :nerd_face:

https://developer.apple.com/design/human-interface-guidelines/ios/controls/pickers/


#3

Sorted out the Date Picker OK, but how do you set the background to white for a Date Picker?

It doesn’t give me the option to change the background color for some reason.


#4

If you don’t see the ability to change a UI item in the styles pane, sometimes there’s access within the properties of an element. Date Pickers have this within the properties of the element here…