This is a timepicker component which works as follows:
It has 3 columns (hour, minute and AM/PM), and the user can change each of the 3 values individually by making an upward/downward swipe movement to scroll through the values.
And then they can click “Done” obviously to confirm their choice.
This style of date/time picker was common in previous versions of iOS (I believe iOS7) and Android (something like Android 4.3). Nowadays they use different metaphors but I like the look and usability of this one.
Now this is not just for time selection, because you could apply it wherever you have a value that consists of one or more “parts” that are discrete “ranges” of values (e.g. a date, individual digits in a monetary amount, etc).
Would this be difficult to build with Ionic?
I think the styling (visuals) wouldn’t be the hardest part (quite easy probably).
It’s the “swiping” that might be the (somewhat) difficult part to get right. For instance if the user swipes ‘faster’ then the values should change faster obviously, so you need to be able to measure the speed of the swipe movement.
It works with Ionic and numerous other frameworks. Small not, I’m in no way affiliated with developers of that component(s).
You can use them even if you’re not willing to pay. They offer 15-day trial. Accept it, test it, use their CSS. Build rest of the component on your own. I would call it a shortcut and just to make myself clear, I’m not advocation stealing, you will only learn from their code. There’s nothing wrong with that.
Okay thanks, yes I knew about Mobiscroll but I think I’ll try to build it myself so I can have the exact look I want.
As said the visuals are probably the easy part, it’s handling the touch events that might be challenging.
Anyway I don’t want to spend too much time (or money) on it. If handling the touch events turns out to be too hard or impossible then I’ll drop the feature and use another UI approach.
But it might be a good chance to learn more about how to work with touch events in Ionic.
Thanks, I knew about that one as well (did my research), but it doesn’t have the “change value by swiping up or down” feature.
The point is, my client (for whom I’m building 2 apps) is making a big deal out of this, he’s very keen on having the “swipe” stuff throughout the UI, kind of an obsession for him it seems. Otherwise I wouldn’t have cared for this as much.
He also wants swipe to change tabs, and so on and so on. Doesn’t work out of the box in Ionic, can be added fairly easily but no animated transitions and interferes with the side menus. Well it keeps me busy.
and just to make myself clear, I’m not advocation stealing, you will only learn from their code. There’s nothing wrong with that.