ionic-team / ionic-team/ionic-framework

feat: Add new interaction styles for Datetime component

Đang mở
#30,033 0 bình luận 1 reaction 0 người được giao Xem trên GitHub
type: feature request
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.

### 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)](https://ionicframework.com/docs/api/datetime#iso-8601-datetime-format-yyyy-mm-ddthhmmz). This could be implemented similarly to Material Design's [date picker](https://m3.material.io/components/date-pickers/overview#009ab799-d5f6-474d-b82a-0290d7bab6fb) and [time picker](https://m3.material.io/components/time-pickers/overview#453a1694-0037-45f8-9421-8899bde1b6ea)

### 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](https://ionicframework.com/docs/api/datetime#wheel-style-pickers). Adding another mode will increase accessibility and follow other UI component libraries.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Start by reviewing the ion-datetime documentation and the existing wheel and grid interaction styles. Define how typed date and time entry should follow the documented ISO 8601 formats, including the alternative button-based flow; done means keyboard users can enter dates and times in the supported formats.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
typescript
Lĩnh vực
frontend
Loại issue
Tính năng
Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.