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

feat: Use arrows to change day/month/year HH:SS in datetime #18122

Closed trakhimenok closed 3 years ago

trakhimenok commented 5 years ago

Feature Request

Ionic version:

[x] 4.3.0

Describe the Feature Request

Currently ion-datetime control is accessible through keyboard in non optimal way. To change day/month user should use TAB key to go to target value and then press space key to select it.

The issue with this is that if user needs to change just value in 2nd column (s)he needs to TAB skip all the values in 1st one (e.g. 31 days for example). This is very daunting experience. It's also does not help that while tab-jumping though values the current column is not scrolled so user can't see currently focused item when it's out of visible window.

Describe Preferred Solution

The better solution would be to use left-right keys to change current columns and up-down keys to navigate values. The space still can be used to select focused value to be current.

The tab key should be used/reserved to navigation between controls. So when in datetime control and tab pressed the datetime should close and next control should get focus.

Describe Alternatives

Also it would be super cool to support entering date with number keys.

Related Code

http://plnkr.co/edit/li6pVumtGoVGrhjTbAqg?p=preview

Additional Context

ionitron-bot[bot] commented 4 years ago

Thanks for the issue! This issue is being closed due to inactivity. 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.

Thank you for using Ionic!

alex-steinberg commented 4 years ago

What is the plan for making ion-datetime accessible? I am not able to use it at all in my PWA or in the docs demo. Are there non-standard shortcuts I can use? Many thanks.

corneil commented 4 years ago

Most of Ionic is really awesome but the date picker doesn't match up. What is wrong with https://material.io/components/date-pickers this kind of date picker? Expanding this to provide for a time as well is very easy.

willmartian commented 3 years ago

Thanks for the issue! ion-datetime has revamped keyboard navigation coming out in Framework v6.

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.