ionic-team / ionic-team/ionic-framework

feat: Add new interaction styles for Datetime component

未关闭
#30,033 0 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看
type: feature request
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 14 小时
30 天内合并 PR
50

描述

### 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.

贡献指南

打开贡献指南

调研方向

首先查看 ion-datetime 文档以及现有的 wheel 和 grid 交互样式。定义键入日期和时间时应如何遵循文档化的 ISO 8601 格式,包括基于按钮的替代流程;完成的标准是键盘用户能够以受支持的格式输入日期和时间。

由索引模型根据 Issue 内容生成。

评估

技术栈
typescript
领域
frontend
Issue 类型
功能
难度
5/5
预计耗时
一周以上
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。