feat: add support for wheel picker in ion-datetime

[jongbonga]

Prequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Have the option to choose between the wheel and calendar with a mode prop.

Describe the Use Case

Most apps that were using the old wheel mode didn't cater for calendar design and have to either squeeze the whole calendar into a tight space, open a modal, or a popover to display a calendar.

the upgrade might be tedious for some people (me...)

Describe Preferred Solution

Have a mode prop to switch between calendar and wheel

<ion-calendar mode="wheel"></ion-calendar>

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[liamdebeasi]

This is something we are definitely interested in adding to Ionic. The current wheel picker in Ionic 5 has performance issues and is buggy. We did not have the resources to refactor the wheel picker and add the new calendar picker at the same time, so we chose to start with the calendar picker in Ionic 6. We should expose this new wheel picker functionality through ion-picker so developers using wheels in non-datetime contexts can take advantage of its improvements.

[liamdebeasi]

Also our ion-datetime migration guide will cover use cases such as this so developers can easily get started with the calendar picker when Ionic 6.

[jongbonga]

Looking forward to it. Thanks

[scr2em]

@liamdebeasi Hi, what is the current progress of this feature ?

[diogomgbrito]

Hi, any news related to this feature? Having a wheel picker for day/month/year and not only month/year, year and time is needed in my project and I would like to know if we can count on this or need to find another way. Thanks!

[cperez87]

Wheel picker style is also important in our project.

The UX of the picker feels more natural to users when entering things like Birth Date, ID Expirations, etc due to the ease of going back/forth many years.

The new calendar works great when the date the customer select is near a known date (eg Today). But, for DOB type of things requires more cognitive load:

• User must realize to click on month-year at the top to switch and go back.
• User must realize to click again on the month-year to go back to the days view

Thank you!

[rdlabo]

Are you having trouble implementing your date of birth or expiration date? Me too. I solved this problem by displaying the accordion in multiples until the Wheel Picker was implemented.

https://zenn.dev/rdlabo/articles/62f404d448df01#accordion---multi

I hope it helps.

[dodomui]

@cperez87 We have received several users feedback regarding the date-time picker not working as the user didn't realize the need to click again on the month-year to go back to the date view and select date again to make it works.

Several suggestions here.

1. Provide a wheel picker option as mentioned above.
2. User must select month-year first then only date.
3. Option to disable month-year dropdown, so user can go by next or previous button.
4. Value change accordingly after month/year change.

[migue99angel]

Hi, any news related to this feature? I think the actual ion-datetime is not user-friendly for birthdates or stuff like that.

[liamdebeasi]

We are actively working on this feature. There is a list of PRs above your comment that show the progress of development on this feature.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/25468, and the feature will be available in an upcoming minor release of Ionic.

We do not have an estimate of when the next minor version of Ionic will be released. However, we are actively working on it. We will announce the minor release on our blog, Twitter, and GitHub release page

[liamdebeasi]

Here is a video of the new wheel picker

https://user-images.githubusercontent.com/2721089/173685480-b97cc9c2-d61f-41b7-85b4-30155cdec6f3.mp4

[jongbonga]

@liamdebeasi thanks for the effort. on the date-time mode, how does one select the year?

[liamdebeasi]

Using the wheel picker with presentation="date" gives the year its own column (shown in the first few seconds of the video). Using the wheel picker with presentation="date-time" or presentation="time-date" does not provide a way of selecting the year.

This is by design. The date + time wheel picker is designed for selecting a specific time/date in the near future or past. A good use case is a reminders app that tells you when to leave to catch a train or a bus. Using the wheel picker to set a reminder for tomorrow at 10:30 is valuable and easier to do with the wheel picker than using the current grid interface. On the other hand, setting a reminder at a particular time 5 years from now is not very valuable as that time information will likely change over the course of 5 years. Native iOS also has this same behavior.

[jongbonga]

Sgtm

[mirko77]

We are not able to trigger the seconds selection on the new Ionic 6 version.

<ion-datetime
id="datetime"
presentation="time"
value="13:47:20"
></ion-datetime>

or using the full ISO

<ion-datetime
id="datetime"
presentation="time"
value="1994-12-15T13:47:20Z"
></ion-datetime>

do not work

[diogomgbrito]

Hey @liamdebeasi any date update on the release of the feature?

[mirko77]

Given the limitations of the current implementation, we ended up using the Wheel Selector Plugin https://ionicframework.com/docs/native/wheel-selector

[liamdebeasi]

This was released as part of Ionic 6.2.0 earlier today: https://ionicframework.com/docs/api/datetime#wheel-style-pickers

[jongbonga]

Thank you @liamdebeasi

[diogomgbrito]

Thank you @liamdebeasi !

[below43]

Thanks for this @liamdebeasi

[ionitron-bot[bot]]

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.