search

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.01k stars 13.51k forks source link

feat(ion-datetime): match Material Design for Android datetime picker #22152

Closed Yohandah closed 4 years ago

Yohandah commented 4 years ago

Feature Request

Ionic version:

[x] 5.x

Describe the Feature Request

Today, Ionic uses ion-datetime to display a picker of time, date, or both in a wheel form factor.

In material design, this is two different component : date-picker, and time-picker, with each, their specific behavior :

DatePicker : Wheel isn't a thing. This is a calendar view, with an option for a date range. image

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

TimePicker : Wheel isn't a thing. This is a manual input with keyboard or a clock picker. image

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

Currently being implemented in MDC : https://github.com/material-components/material-components-web/issues/54 & https://github.com/material-components/material-components-web/issues/55

But iOS uses only one component for both behaviors : UIDatePicker with 3 styles, :

  1. classic wheel : Current Ionic implementation, a wheel picker
  2. inline : Calendar view, time view or both that takes place into the view
  3. compact : Calendar view, time view or both that takes place into a popup modal

nb: The time picker can be filled with keyboard but also can be scrolled to change its value like a wheel

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

I don't know what Ionic's take should be since this is pretty tricky and there is a LOT of behaviors so a lot of work to be done, but I think it would be great to make some improvements on IonDateTime to be closer to the native platforms and have better date management through Ionic.

liamdebeasi commented 4 years ago

Thanks for the issue. I am going to merge this with https://github.com/ionic-team/ionic-framework/issues/15500.

Yohandah commented 4 years ago

@liamdebeasi okay I saw this issue but thought it was only for Desktop and not for Android and iOS UIDatePicker my bad! thanks

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.