ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

https://ionicframework.com

MIT License

51.08k stars 13.51k forks source link

feat: Component time picker circle clock. (md style) #21295

Closed infacto closed 3 years ago

infacto commented 4 years ago

Feature Request

Ionic version: 5.x

Describe the Feature Request

Describe Preferred Solution https://vuetifyjs.com/en/components/time-pickers/

(incl. 24h format)

Describe Alternatives The current solution. Keep it as alternative. https://ionicframework.com/docs/api/datetime

y0nd0 commented 3 years ago

The current time / date picker of Ionic is not only boring ;) it's also a bit buggy e.g. when you want to set an exact time. In my case: Try to set a time like 09:42. The minutes wheel does not lock on 42. It always jumps to 41 or 43. Argh... xD Seriously, it's really hard to set. But anyway...

A circle time picker ala Android / Flutter / Material would be great. It looks good, it's intuitive and fun if it works great (no touch issues, etc.).

https://material.io/components/time-pickers

liamdebeasi commented 3 years ago

Thanks for the issue. With Ionic 6 we will be releasing an all new ion-datetime component complete with a revamped time picker that should resolve a lot of the current issues with the Ionic 5 time picker.

We do not currently have plans to implement the circular clock on MD mode. We felt that the analog picker was hard to use on both mobile and desktop devices. The Vuetify example provided in this thread received similar feedback regarding its ease of use (see: https://github.com/vuetifyjs/vuetify/issues/6957). The time picker in Ionic 6 will have touch, scroll, and keyboard support for better usability.

You can get started with the Ionic 6 beta here: https://github.com/ionic-team/ionic-framework/blob/next/BETA.md

I am going to close this issue out. Thanks!

infacto commented 3 years ago

@liamdebeasi Just want to notice: The circular (analog) time picker is a part of Android native UI and also provides digital select. So theoretically Ionic should implement it if it wants to imitate the Android UI. What is actually does / tries. Also Flutter has it. ...

Source: https://material.io/components/time-pickers

But I haven't tested Ionic 6 yet. I'm maybe ok with that today. As I see the iOS time picker is also not as much creative as the Android one. Just a simple slider for each value as Ionic currently has. The most important thing is that the component whatever it looks has a great UX. A cool looking UI with efficient reliable control is perfect.

ionitron-bot[bot] commented 3 years ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.