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

@afc163
Copy link
Member

@afc163 afc163 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
Copy link

@codecov codecov bot 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
26 checks passed
26 checks passed
@packtracker[bot]
packtracker/css 484 KB — ▲ 100.00%
Details
@packtracker[bot]
packtracker/javascript 1.83 MB — ▼ 4.26%
Details
CodeFactor No issues found.
Details
@lgtm-com[bot]
LGTM analysis: JavaScript No new or fixed alerts
Details
License Compliance All checks passed.
Details
@semantic-pull-requests[bot]
Semantic Pull Request ready to be squashed
Details
@wip[bot]
WIP Ready for review
Details
ant-design.ant-design #ant design succeeded
Details
@buildsize[bot]
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[bot]
codecov/patch Coverage not affected when comparing 6e80b27...014d320
Details
@codecov[bot]
codecov/project 95.96% remains the same compared to 6e80b27
Details
security/snyk - package.json (paranoidjk) No manifest changes detected
@delete-merged-branch delete-merged-branch bot deleted the faq-about-date-picker-mode branch Jun 5, 2019
@ikobe-zz ikobe-zz mentioned this pull request Jun 6, 2019
10 tasks
@AltRoot17
Copy link

@AltRoot17 AltRoot17 commented Jun 12, 2021

try this getPopupContainer={(trigger: { parentElement: any; }) => trigger.parentElement}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants