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

docs: Add FAQ for DatePicker/RangePicker mode prop usage #16984

Merged
merged 2 commits into from Jun 5, 2019

Conversation

Projects
None yet
2 participants
@afc163
Copy link
Member

commented Jun 5, 2019

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / document update
  • Component style update
  • TypeScript definition update
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

当我指定了 DatePicker/RangePicker 的 mode 属性后,点击后无法选择年份/月份?

在业务开发中,你可能有年份选择,月份范围选择,周范围选择等需求,此时你给现有组件增加了 mode 属性,却发现无法进行点击选择行为,面板也不会关闭。

就像这个回复里解释的一样,这是因为 <DatePicker mode="year" /> 不等于 YearPicker<RangePicker mode="month" /> 不等于 MonthRangePickermode 属性是在 antd 3.0 时,为了控制面板展现状态而添加的属性,以支持展示时间面板等需求而添加的。mode 只会简单的改变当前显示的面板,不会修改默认的交互行为(比如 DatePicker 依然是点击日才会完成选择并关闭面板)。


When set mode to DatePicker/RangePicker, cannot select year or month anymore?

In real world development, you may need a YearPicker, MonthRangePicker or WeekRangePicker. You are trying to add mode to DatePicker/RangePicker expected to implement those pickers. However, the DatePicker/RangePicker cannot be selected and the panels won't close now!

Like the explaination here, that is because <DatePicker mode="year" /> do not equal to YearPicker, <RangePicker mode="month" /> do not equal to MonthRangePicker either. The mode property was added to support showing time picker panel in DatePicker in antd 3.0, which simply control the displayed panel and won't change the original date picking behavior of DatePicker/RangePicker (for instance you still need to click date cell to finish selection in a DatePicker, whatever the mode is).

Workaround

You can refer to this article or this article, using mode and onPanelChange to encapsulate a YearPicker or MonthRangePicker for your needs. Or you can wait for our antd@4.0, in which we are planing to add more XxxPickers for those requirments.

📝 Changelog

Language Changelog
🇺🇸 English 增加 DatePicker/RangePicker 指定 mode 后无法选择的文档说明。
🇨🇳 Chinese Add FAQ for DatePicker/RangePicker with mode cannot be selected.

View rendered components/date-picker/index.en-US.md
View rendered components/date-picker/index.zh-CN.md
View rendered docs/react/faq.en-US.md
View rendered docs/react/faq.zh-CN.md

@afc163 afc163 force-pushed the faq-about-date-picker-mode branch from 5ab8084 to 6295cb4 Jun 5, 2019

@codecov

This comment has been minimized.

Copy link

commented Jun 5, 2019

Codecov Report

Merging #16984 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##           master   #16984   +/-   ##
=======================================
  Coverage   95.96%   95.96%           
=======================================
  Files         263      263           
  Lines        7336     7336           
  Branches     2047     2008   -39     
=======================================
  Hits         7040     7040           
  Misses        294      294           
  Partials        2        2

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 6e80b27...014d320. Read the comment docs.

@afc163 afc163 merged commit 88737c0 into master Jun 5, 2019

24 of 26 checks passed

packtracker/css 484 KB — ▲ 100.00%
Details
packtracker/javascript 1.83 MB — ▼ 4.26%
Details
CodeFactor No issues found.
Details
LGTM analysis: JavaScript No new or fixed alerts
Details
License Compliance All checks passed.
Details
Semantic Pull Request ready to be squashed
Details
WIP Ready for review
Details
ant-design.ant-design #ant design succeeded
Details
buildsize No change
Details
ci/circleci: compile Your tests passed on CircleCI!
Details
ci/circleci: dist Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
ci/circleci: setup Your tests passed on CircleCI!
Details
ci/circleci: test_dist Your tests passed on CircleCI!
Details
ci/circleci: test_dist_15 Your tests passed on CircleCI!
Details
ci/circleci: test_dom Your tests passed on CircleCI!
Details
ci/circleci: test_dom_15 Your tests passed on CircleCI!
Details
ci/circleci: test_es Your tests passed on CircleCI!
Details
ci/circleci: test_es_15 Your tests passed on CircleCI!
Details
ci/circleci: test_lib Your tests passed on CircleCI!
Details
ci/circleci: test_lib_15 Your tests passed on CircleCI!
Details
ci/circleci: test_node Your tests passed on CircleCI!
Details
ci/circleci: test_node_15 Your tests passed on CircleCI!
Details
codecov/patch Coverage not affected when comparing 6e80b27...014d320
Details
codecov/project 95.96% remains the same compared to 6e80b27
Details
security/snyk - package.json (paranoidjk) No manifest changes detected

@pr-triage pr-triage bot added PR: merged and removed PR: unreviewed labels Jun 5, 2019

@delete-merged-branch delete-merged-branch bot deleted the faq-about-date-picker-mode branch Jun 5, 2019

@ikobe ikobe referenced this pull request Jun 6, 2019

Merged

docs: 3.19.3 change-log #16998

1 of 10 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.