diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index ab98720446..a4b9922b50 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -135,3 +135,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke margin: 0 8px 12px 0; } + +## FAQ + +- [When set mode to DatePicker/RangePicker, cannot select year or month anymore?](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?) diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index 21fc1d72d1..41f8361903 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -138,3 +138,7 @@ moment.locale('zh-cn'); margin: 0 8px 12px 0; } + +## FAQ + +- [当我指定了 DatePicker/RangePicker 的 `mode` 属性后,点击后无法选择年份/月份?](/docs/react/faq-cn#当我指定了-DatePicker/RangePicker-的-mode-属性后,点击后无法选择年份/月份?) diff --git a/docs/react/faq.en-US.md b/docs/react/faq.en-US.md index ae94949773..01953e1eda 100644 --- a/docs/react/faq.en-US.md +++ b/docs/react/faq.en-US.md @@ -106,6 +106,19 @@ If you need some features which should not be included in antd, try to extend an You can config `nonce` by [ConfigProvider](/components/config-provider/#Content-Security-Policy). +### 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! + +- Reproduce link: https://codesandbox.io/s/dank-brook-v1csy +- Same issues:[#15572](https://github.com/ant-design/ant-design/issues/15572), [#16436](https://github.com/ant-design/ant-design/issues/16436), [#11938](https://github.com/ant-design/ant-design/issues/11938), [#11735](https://github.com/ant-design/ant-design/issues/11735), [#11586](https://github.com/ant-design/ant-design/issues/11586), [#10425](https://github.com/ant-design/ant-design/issues/10425), [#11053](https://github.com/ant-design/ant-design/issues/11053) + +Like [the explaination](https://github.com/ant-design/ant-design/issues/11586#issuecomment-429189877) here, that is because `` do not equal to `YearPicker`, `` do not equal to `MonthRangePicker` either. The `mode` property was added to support [showing time picker panel in DatePicker](https://github.com/ant-design/ant-design/issues/5190) 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](https://juejin.im/post/5cf65c366fb9a07eca6968f9) or [this article](https://www.cnblogs.com/zyl-Tara/p/10197177.html), using `mode` and `onPanelChange` to encapsulate a `YearPicker` or `MonthRangePicker` for your needs. Or you can wait for our [antd@4.0](https://github.com/ant-design/ant-design/issues/16911), in which we are planing to [add more XxxPickers](https://github.com/ant-design/ant-design/issues/4524#issuecomment-480576884) for those requirments. + ### How to spell Ant Design correctly? - ✅ **Ant Design**: Capitalized with space, for the design language. diff --git a/docs/react/faq.zh-CN.md b/docs/react/faq.zh-CN.md index 830f132088..086a6be067 100644 --- a/docs/react/faq.zh-CN.md +++ b/docs/react/faq.zh-CN.md @@ -110,6 +110,19 @@ import { Menu, Breadcrumb, Icon } from 'antd'; 你可以通过 [ConfigProvider](/components/config-provider/#Content-Security-Policy) 来配置 `nonce` 属性。 +### 当我指定了 DatePicker/RangePicker 的 `mode` 属性后,点击后无法选择年份/月份? + +在业务开发中,你可能有年份选择,月份范围选择,周范围选择等需求,此时你给现有组件增加了 `mode` 属性,却发现无法进行点击选择行为,面板也不会关闭。 + +- 重现链接:https://codesandbox.io/s/dank-brook-v1csy +- 相同 issue:[#15572](https://github.com/ant-design/ant-design/issues/15572)、[#16436](https://github.com/ant-design/ant-design/issues/16436)、[#11938](https://github.com/ant-design/ant-design/issues/11938)、[#11735](https://github.com/ant-design/ant-design/issues/11735)、[#11586](https://github.com/ant-design/ant-design/issues/11586)、[#10425](https://github.com/ant-design/ant-design/issues/10425)、[#11053](https://github.com/ant-design/ant-design/issues/11053) + +就像[这个回复](https://github.com/ant-design/ant-design/issues/15572#issuecomment-475476135)里解释的一样,这是因为 `` 不等于 `YearPicker`,`` 不等于 `MonthRangePicker`。 `mode` 属性是在 antd 3.0 时,为了控制面板展现状态而添加的属性,以支持[展示时间面板](https://github.com/ant-design/ant-design/issues/5190)等需求而添加的。`mode` 只会简单的改变当前显示的面板,不会修改默认的交互行为(比如 DatePicker 依然是点击日才会完成选择并关闭面板)。 + +##### 解决办法 + +你可以参照 [这篇文章](https://juejin.im/post/5cf65c366fb9a07eca6968f9) 或者 [这篇文章](https://www.cnblogs.com/zyl-Tara/p/10197177.html) 里的做法,利用 `mode` 和 `onPanelChange` 等方法去封装一个 `YearPicker` 等组件。我们计划在 [antd@4.0](https://github.com/ant-design/ant-design/issues/16911) 中直接[添加更多相关日期组件](https://github.com/ant-design/ant-design/issues/4524#issuecomment-480576884)来支持这些需求。 + ### 如何正确的拼写 Ant Design? - ✅ **Ant Design**:用空格分隔的首字母大写单词,指代设计语言。