ant-design icon indicating copy to clipboard operation
ant-design copied to clipboard

Improve UX of TimePicker

Open yutimo opened this issue 4 years ago • 2 comments

  • [x] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

In our app users use date / range / time pickers frequently

But they complain about the UX as they have to do too many actions to just change values of the fields

They especially don't like having to scroll through the hours list, like that: https://prnt.sc/va4g61

So i tried to put hours in several columns with regular .css, like that:

.ant-picker-time-panel .ant-picker-content {
    width: 90px;
}

.ant-picker-time-panel-column {
    width: 90px;
    display: flex;
    flex-wrap: wrap;
}

.ant-picker-time-panel-column > li {
    width: 25%;
}

The problem is in autoscroll on every value change: https://prnt.sc/va4k77

As i can see in sources, it is not configurable now https://github.com/react-component/time-picker/blob/d708d84bde663d7740c4943c52624beeeda1d2c7/src/Select.jsx#L40

What does the proposed API look like?

It would be useful to add property autoscrollOnChange: boolean, default true to timepicker Or (maybe this is more preferable) support columns: 1 | 2 | 3 | 4 default 1

yutimo avatar Oct 30 '20 14:10 yutimo

Hello @yutimo. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @yutimo, 我们完全同意你的提议/反馈,欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支(新特性发到 feature 分支,其他发到 master 分支),务必填写 Pull Request 内的预设模板,提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献!

giphy

ant-design-bot avatar Oct 30 '20 14:10 ant-design-bot

We are coming across a similar problem that can be seen on https://4x.ant.design/components/time-picker/ directly. Ultimately there is extra Scrolling space below values within the time picker. Screen Shot 2023-02-02 at 2 08 19 PM

jmorales-sdt avatar Feb 02 '23 20:02 jmorales-sdt

Picker component has been refactor in 5.14.0, and this issue is discussed and handled with https://github.com/react-component/picker/pull/691 which will be marked as closed.

Please feel free to create new issue if you have any further question :)

Picker 组件于 5.14.0 版本进行了重构,此问题已被 https://github.com/react-component/picker/pull/691 中进行讨论与处理。

如果有任何问题,欢迎随时创建新的 issue :)

zombieJ avatar Feb 20 '24 06:02 zombieJ