Merge pull request #16984 from ant-design/faq-about-date-picker-mode

docs: Add FAQ for DatePicker/RangePicker mode prop usage

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;
 }
 </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?)

components/date-picker/index.zh-CN.md

@@ -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-属性后，点击后无法选择年份/月份？)

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 `<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.

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)里解释的一样，这是因为 `<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**：用空格分隔的首字母大写单词，指代设计语言。

webpack.config.js

@@ -42,7 +42,7 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
         project_token: '8adbb892-ee4a-4d6f-93bb-a03219fb6778',
         upload: process.env.CI === 'true',
         fail_build: true,
-        exclude_assets: name => ['antd.min.js', 'antd.min.css'].includes(name),
+        exclude_assets: name => !['antd.min.js', 'antd.min.css'].includes(name),
       }),
     );
   });