mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 19:19:26 +08:00
📝 Add FAQ for DatePicker/RangePicker mode prop usage
This commit is contained in:
parent
6e80b275a5
commit
6295cb4597
@ -135,3 +135,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
|
||||
margin: 0 8px 12px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
## 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?)
|
||||
|
@ -138,3 +138,7 @@ moment.locale('zh-cn');
|
||||
margin: 0 8px 12px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
## FAQ
|
||||
|
||||
- [当我指定了 DatePicker/RangePicker 的 `mode` 属性后,点击后无法选择年份/月份?](/docs/react/faq-cn#当我指定了-DatePicker/RangePicker-的-mode-属性后,点击后无法选择年份/月份?)
|
||||
|
@ -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 `<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](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.
|
||||
|
@ -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)里解释的一样,这是因为 `<DatePicker mode="year" />` 不等于 `YearPicker`,`<RangePicker mode="month" />` 不等于 `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**:用空格分隔的首字母大写单词,指代设计语言。
|
||||
|
Loading…
Reference in New Issue
Block a user