exoflex: iOS custom DateTimePicker

[oshimayoan]

Is your feature request related to a problem? Please describe. https://github.com/kodefox/oasis/pull/74#discussion_r351990526 tl;dr UX of iOS default DatePicker sucks

Describe the solution you'd like Use calendar component for DatePicker but add a new prop to be able to use the default one.

Describe alternatives you've considered None at the moment.

[oshimayoan]

The problem is, what is the expectation for the behaviour?

Should we show it in a modal? But I'm not sure it will give a balance with the TimePicker that uses an Action Sheet.

/cc @kodefox/infra

[sstur]

I guess the fundamental reason why I brought this up is because the datepicker on iOS is so terrible. Furthermore, the rest of our components are loosely based on Material UI, except this one.

Would it make sense to at least allow an option (for both the date picker and time picker) to use a custom implementation vs the iOS one.

A more ambitious approach would be to use the custom one by default and provide a useNativePickerOnIOS prop.

[oshimayoan]

Yeah, I agree to implement custom time picker too, not just the date picker.

Because I think it's a bit unbalance and kinda ugly if we use Material UI for date picker and Apple Human Interface for time picker. Like this:

I think I'll discuss about this with Vincent and find a good custom time picker design.

Also, should we also do this custom implementation for Android as well? What do you think?

[oshimayoan]

What do you think about this for iOS @sstur?

[sstur]

I like it!

Especially the calendar.

Not sure about the up/down icons/buttons on the calendar. Kinda thinking we should make them left/right and also put the left arrow on the left side of the screen. Thoughts?

Also, for the time interface, I'm not sure if I love that one, it feels a little like a poor imitation of the built-in spinner, so I'm wondering if we should do something that's not spinny. What does the android time picker look like? What about the current web one?

Maybe meet with Vincent to brainstorm a few other options for the time picker.

[oshimayoan]

Not sure about the up/down icons/buttons on the calendar. Kinda thinking we should make them left/right and also put the left arrow on the left side of the screen. Thoughts?

Yes, I also think of that. I think left-right should be the better UX for that because of the direction familiarity of the user.

Also, for the time interface, I'm not sure if I love that one, it feels a little like a poor imitation of the built-in spinner, so I'm wondering if we should do something that's not spinny. What does the android time picker look like? What about the current web one?

I see. We were thinking to use iOS default's time picker for that. But I think you're right! I should discuss it again with Vincent.

On Android, the default time picker is like this.

[darcien]

Not sure about the up/down icons/buttons on the calendar. Kinda thinking we should make them left/right and also put the left arrow on the left side of the screen. Thoughts?

+1 for using left/right instead of up/down.

Also, for the time interface, I'm not sure if I love that one, it feels a little like a poor imitation of the built-in spinner, so I'm wondering if we should do something that's not spinny. What does the android time picker look like? What about the current web one?

This library imitate the android time picker on the web. https://materializecss.com/pickers.html

[nathaniaelvina]

i think we have the updated design already

[oshimayoan]

@nathaniaelvina That looks good but I don't know about the arrow icons actually. That makes it a bit hard for the user to change the desired time, even harder than the default one or Android one as the user can't change it in one action.

For example, if the user wants to change the hour to 7 then they must press the up arrow icon 3 times to make it happens. Of course, they could also use the keyboard to change it to 7 directly but that also requires more than one action.

That's why I think that arrow icons may not be the best UX for mobile time picker.

Thoughts anyone?

[oshimayoan]

Also, I came across these time picker designs from dribbble.com which quite interesting as it can change the desired time in one action similar to iOS default.

source: https://dribbble.com/shots/6913765-Tasker-A-Task-Manager-App

source: https://dribbble.com/shots/2231885--Sleepy-Time-Picker

I know those two are not the best as they didn't become a trend for time picker UI.

[nathaniaelvina]

i think we have the updated design already

actually this is vincent's update that has been approved by simon

That's why I think that arrow icons may not be the best UX for mobile time picker.

I agree! i prefer swiping rather than pressing buttons or typing. because it doesn't require me to lift my finger. should we go for the common UX, like these? need more styling tho so it looks prettier.

[oshimayoan]

Yeah, that is a good alternative too.

[oshimayoan]

What do you think, @sstur?

[darcien]

I just saw this DatePicker, I like it, but it's date only, no time picker.

https://github.com/MattLLLLL/MDatePickerView