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

fix(module:date-picker): optimized interaction by using input box #4146

Merged
merged 8 commits into from
Sep 23, 2019

Conversation

wenqi73
Copy link
Member

@wenqi73 wenqi73 commented Sep 12, 2019

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Application (the showcase website) / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number: #4130

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

优化 date picker 与 range picker 的 input 交互

  • 输入正确格式的 input 之后日历面板会高亮显示该日期,range picker 需要左右 input 都有值才会在日历面板中显示,此时不会触发 ngModelChange。
  • 输入 enter 或者鼠标点击日期,遮罩关闭,触发 ngModelChange。
  • 通过 esc 或直接点击遮罩关闭不会保存 input 值。

@pr-triage pr-triage bot added the PR: draft label Sep 12, 2019
@auto-assign auto-assign bot requested a review from wzhudev September 12, 2019 02:01
@hsuanxyz hsuanxyz requested review from hsuanxyz and removed request for wzhudev September 12, 2019 02:18
@netlify
Copy link

netlify bot commented Sep 12, 2019

Deploy preview for ng-zorro-master ready!

Built with commit e30fee3

https://deploy-preview-4146--ng-zorro-master.netlify.com

@codecov
Copy link

codecov bot commented Sep 13, 2019

Codecov Report

Merging #4146 into master will increase coverage by 0.01%.
The diff coverage is 89.47%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #4146      +/-   ##
==========================================
+ Coverage   92.27%   92.29%   +0.01%     
==========================================
  Files         517      518       +1     
  Lines       10961    10960       -1     
  Branches     1985     1983       -2     
==========================================
+ Hits        10114    10115       +1     
+ Misses        422      420       -2     
  Partials      425      425
Impacted Files Coverage Δ
...omponents/date-picker/abstract-picker.component.ts 100% <ø> (ø) ⬆️
...ponents/date-picker/date-range-picker.component.ts 81.63% <100%> (+0.38%) ⬆️
...te-picker/lib/calendar/calendar-input.component.ts 100% <100%> (+3.57%) ⬆️
components/core/time/candy-date.ts 85.26% <50%> (-1.56%) ⬇️
components/calendar/date-table.component.ts 92.7% <66.66%> (-0.91%) ⬇️
...te-picker/lib/popups/date-range-popup.component.ts 95.42% <96%> (+0.13%) ⬆️
components/affix/nz-affix.component.ts 92.15% <0%> (-3.94%) ⬇️
components/i18n/nz-i18n.service.ts 71.42% <0%> (ø) ⬆️
components/core/util/style-checke.ts
components/affix/utils.ts 100% <0%> (ø)
... and 6 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update de1e496...e30fee3. Read the comment docs.

@wenqi73 wenqi73 marked this pull request as ready for review September 13, 2019 02:32
@wenqi73 wenqi73 changed the title fix(module:date-picker): input value change should trigger panel change fix(module:date-picker): optimized interaction by using input box Sep 13, 2019
@wenqi73 wenqi73 force-pushed the fix-input branch 2 times, most recently from d9a7e05 to fca2ca0 Compare September 13, 2019 03:06
components/calendar/date-table.component.ts Outdated Show resolved Hide resolved
this.value = null; // Clear current value to not sync time by next step
this.changeValue(value);
// tslint:disable-next-line: no-any
this.value = null as any; // Clear current value to not sync time by next step
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

value: CompatibleValue | null 如果可以为 null 最好加上类型。

@wenqi73 wenqi73 merged commit f0ddb79 into NG-ZORRO:master Sep 23, 2019
@lhysrc
Copy link

lhysrc commented Sep 26, 2019

“直接点击遮罩关闭不会保存 input值”这个体验还是有点不好啊。
按Esc取消无可厚非,但保存值没必要还得按一下Enter键,建议点击遮罩关闭还是要保存值。

@wenqi73
Copy link
Member Author

wenqi73 commented Sep 29, 2019

@lhysrc 感谢反馈,我们会考虑加上。

@wenqi73 wenqi73 deleted the fix-input branch October 25, 2019 03:00
Ricbet pushed a commit to Ricbet/ng-zorro-antd that referenced this pull request Apr 9, 2020
…-ZORRO#4146)

* fix(module:date-picker): input value change should trigger panel change

* chore: update

* fix: test

* fix: enter on nzShowTime

* chore: delete comment

* fix: resultOk can set value from input

* fix: wrong generic

* fix: resolve review comment
hsuanxyz pushed a commit to hsuanxyz/ng-zorro-antd that referenced this pull request Aug 5, 2020
…-ZORRO#4146)

* fix(module:date-picker): input value change should trigger panel change

* chore: update

* fix: test

* fix: enter on nzShowTime

* chore: delete comment

* fix: resultOk can set value from input

* fix: wrong generic

* fix: resolve review comment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants