Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add new interaction styles for Datetime component #30033

Open
3 tasks done
swimer11 opened this issue Nov 22, 2024 · 0 comments
Open
3 tasks done

feat: Add new interaction styles for Datetime component #30033

swimer11 opened this issue Nov 22, 2024 · 0 comments
Labels

Comments

@swimer11
Copy link

Prerequisites

Describe the Feature Request

Currently, the ion-datetime component supports two interaction styles: wheel and grid. While these styles are visually appealing and user-friendly, they can slow down users who prefer or are faster when typing a date directly into a field. A typed input mode would enhance usability by allowing users to quickly and efficiently input a date using a keyboard.

Describe the Use Case

When filling out forms on a tablet with a keyboard, users would have to switch to touch when selecting a date. They could use keyboard arrow keys, but choosing a date can be significantly slower if the users already know the date they want to enter.

Describe Preferred Solution

Add a new "typed" mode to the ion-datetime component with a text input field. This mode would allow users to manually type in a date and time in a specified format (Current Formats). This could be implemented similarly to Material Design's date picker and time picker

Describe Alternatives

Instead of a new "typed" mode that only shows a text input field, a new showTypedButton attribute could be added. This would control whether an icon is shown to the user in the grid view. The user could click on when in the grid view to show the text input option.

Related Code

No response

Additional Information

In issue #27414 liamdebeasi mentioned that the "wheel picker is designed for mobile application and is not intended for desktop use", but with the current setup desktop users would be forced to use the wheel option in all presentation options other than 'date', link to chart. Adding another mode will increase accessibility and follow other UI component libraries.

@ionitron-bot ionitron-bot bot added the triage label Nov 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant