docs: generate picker (#20515)

* docs: faq How to use dayjs instead of moment

* adjust article position

* add steps and use cases

* change docs

* add bisheng config source

* translate title

* remove customize TimePicker

* simplified document

* Update docs/react/generate-picker.zh-CN.md

Co-Authored-By: 偏右 <afc163@gmail.com>

* Update docs/react/generate-picker.zh-CN.md

Co-Authored-By: 偏右 <afc163@gmail.com>

* add cra demo

* init demo refer 'Use in TypeScript'

Co-authored-by: 偏右 <afc163@gmail.com>

components/calendar/index.en-US.md

@@ -46,3 +46,7 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
 | onSelect | Callback for when a date is selected | function(date: moment） | - |  |
 | onChange | Callback for when date changes | function(date: moment） | - |  |
 | headerRender | render custom header in panel | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | - |  |
+
+## FAQ
+
+- [How to use Calendar with customize date library like dayjs](/docs/react/generate-picker#Calendar)

components/calendar/index.zh-CN.md

@@ -47,3 +47,7 @@ title: Calendar
 | onSelect | 点击选择日期回调 | function(date: moment） | 无 |  |
 | onChange | 日期变化回调 | function(date: moment） | 无 |  |
 | headerRender | 自定义头部内容 | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | 无 |  |
+
+## FAQ
+
+- [如何在 Calendar 中使用自定义日期库（如 dayjs ）](/docs/react/generate-picker#Calendar)

components/date-picker/index.en-US.md

@@ -151,3 +151,5 @@ The following APIs are shared by DatePicker, YearPicker, MonthPicker, RangePicke
 ## 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?)
+
+- [How to use DatePicker with customize date library like dayjs](/docs/react/generate-picker#DatePicker)

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

@@ -153,3 +153,5 @@ import 'moment/locale/zh-cn';
 ## FAQ
 
 - [当我指定了 DatePicker/RangePicker 的 mode 属性后，点击后无法选择年份/月份？](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)
+
+- [如何在 DatePicker 中使用自定义日期库（如 dayjs ）](/docs/react/generate-picker#DatePicker)

components/time-picker/index.en-US.md

@@ -60,3 +60,7 @@ import moment from 'moment';
 | focus() | get focus    |         |
 
 <style>.code-box-demo .ant-picker { margin: 0 8px 12px 0; }</style>
+
+## FAQ
+
+- [How to use TimePicker with customize date library like dayjs](/docs/react/generate-picker#TimePicker)

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

@@ -61,3 +61,7 @@ import moment from 'moment';
 | focus() | 获取焦点 |      |
 
 <style>.code-box-demo .ant-picker { margin: 0 8px 12px 0; }</style>
+
+## FAQ
+
+- [如何在 TimePicker 中使用自定义日期库（如 dayjs ）](/docs/react/generate-picker#TimePicker)

docs/react/contributing.en-US.md

@@ -1,5 +1,5 @@
 ---
-order: 11
+order: 12
 title: Contributing
 toc: false
 ---

docs/react/contributing.zh-CN.md

@@ -1,5 +1,5 @@
 ---
-order: 11
+order: 12
 title: 贡献指南
 toc: false
 ---

docs/react/customize-theme.en-US.md

@@ -1,5 +1,5 @@
 ---
-order: 6
+order: 7
 title: Customize Theme
 ---
 

docs/react/customize-theme.zh-CN.md

@@ -1,5 +1,5 @@
 ---
-order: 6
+order: 7
 title: 定制主题
 ---
 

docs/react/faq.en-US.md

@@ -1,5 +1,5 @@
 ---
-order: 10
+order: 11
 title: FAQ
 ---
 
@@ -58,7 +58,7 @@ See: https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
 
 ### How to replace momentjs to Day.js to reduce bundle size？
 
-We provide `antd-dayjs-webpack-plugin` plugin to replace `momentjs` to `Day.js` directly without changing a line of existing code. More info at [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin).
+Can refer to [generate picker](/docs/react/generate-picker).
 
 ### It doesn't work when I change `defaultValue` dynamically.
 

docs/react/faq.zh-CN.md

@@ -1,5 +1,5 @@
 ---
-order: 10
+order: 11
 title: FAQ
 ---
 
@@ -58,7 +58,7 @@ import { Menu, Breadcrumb, Icon } from 'antd';
 
 ### 如何使用 Day.js 替换 momentjs 来减小打包大小？
 
-我们提供了 `antd-dayjs-webpack-plugin` 插件，无需对现有代码做任何修改直接替换成 `Day.js`。请参考 [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin)。
+可以参考[自定义选择框](/docs/react/generate-picker)。
 
 ### 当我动态改变 `defaultValue` 的时候它并没有生效。
 

docs/react/generate-picker.en-US.md

@@ -0,0 +1,106 @@
+---
+order: 5
+title: Generate picker
+---
+
+## How to use DatePicker with customize date library like dayjs？
+
+Consider of bundle size, you can replace momentjs with customize date library. We provide two ways to customize date library:
+
+### Custom component
+
+The first way is use `generatePicker` (or `generateCalendar`) helps to create Picker components.
+
+First, we initialize an antd demo of `create-react-app`. You can refer to [Use in TypeScript](/docs/react/use-in-typescript), or you can start directly here [init antd](https://github.com/xiaohuoni/antd4-generate-picker/commit/47fec964e36d48bd15760f8f5abcb9655c259aa6)
+
+#### DatePicker.tsx
+
+Create `src/components/DatePicker.tsx`.
+
+For example:
+
+```tsx
+import { Dayjs } from 'dayjs';
+import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
+import generatePicker from 'antd/es/date-picker/generatePicker';
+import 'antd/es/date-picker/style/index';
+
+const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig);
+
+export default DatePicker;
+```
+
+#### TimePicker.tsx
+
+Create `src/components/TimePicker.tsx`.
+
+For example:
+
+```tsx
+import { Dayjs } from 'dayjs';
+import * as React from 'react';
+import DatePicker from './DatePicker';
+import { PickerTimeProps } from 'antd/es/date-picker/generatePicker';
+import { Omit } from 'antd/es/_util/type';
+
+export interface TimePickerProps extends Omit<PickerTimeProps<Dayjs>, 'picker'> {}
+
+const TimePicker = React.forwardRef<any, TimePickerProps>((props, ref) => {
+  return <DatePicker {...props} picker="time" mode={undefined} ref={ref} />;
+});
+
+TimePicker.displayName = 'TimePicker';
+
+export default TimePicker;
+```
+
+#### Calendar.tsx
+
+Create `src/components/Calendar.tsx`.
+
+For example:
+
+```tsx
+import { Dayjs } from 'dayjs';
+import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
+import generateCalendar from 'antd/es/calendar/generateCalendar';
+import 'antd/es/calendar/style';
+
+const Calendar = generateCalendar<Dayjs>(dayjsGenerateConfig);
+
+export default Calendar;
+```
+
+#### Export Custom component
+
+Create `src/components/index.tsx`.
+
+For example:
+
+```tsx
+export { default as DatePicker } from './DatePicker';
+export { default as Calendar } from './Calendar';
+export { default as TimePicker } from './TimePicker';
+```
+
+#### Use Custom component
+
+Modify `src/App.tsx`,import `dayjs` and custom component.
+
+```diff
+- import { DatePicker, Calendar } from 'antd';
+- import format from 'moment';
+
++ import { DatePicker, TimePicker, Calendar } from './components';
++ import format from 'dayjs';
+```
+
+If the above steps do not work correctly, you can refer [antd4-generate-picker/antd-ts](https://github.com/xiaohuoni/antd4-generate-picker/tree/master/antd-ts).
+
+If you need JavaScript code, you can refer [antd4-generate-picker/antd-demo](https://github.com/xiaohuoni/antd4-generate-picker/tree/master/antd-demo).
+
+If you are the user of [umi](https://umijs.org/), you can ref [antd4-use-dayjs-replace-moment](https://github.com/xiaohuoni/antd4-use-dayjs-replace-moment).
+
+### Webpack plugin
+
+We also provide another implementation. We provide `antd-dayjs-webpack-plugin` plugin to replace `momentjs` to `Day.js` directly without changing a line of existing code. More info at [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin).

docs/react/generate-picker.zh-CN.md

@@ -0,0 +1,106 @@
+---
+order: 5
+title: 自定义日期库
+---
+
+## 如何在 DatePicker 中使用自定义日期库（如 dayjs ）？
+
+考虑到包的大小，你可以用自定义日期库替换 Moment。在这里我们提供了两种方式来实现替换:
+
+### 自定义组件
+
+第一种方法是使用 `generatePicker`（或 `generateCalendar`）辅助创建 Picker 组件。
+
+我们先初始化一个 `create-react-app` 的 antd demo，你可以参考 [在 TypeScript 中使用](/docs/react/use-in-typescript) 进行构建，也可以直接从这里开始[init antd](https://github.com/xiaohuoni/antd4-generate-picker/commit/47fec964e36d48bd15760f8f5abcb9655c259aa6)
+
+#### DatePicker.tsx
+
+新建 `src/components/DatePicker.tsx`。
+
+编写如下代码:
+
+```tsx
+import { Dayjs } from 'dayjs';
+import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
+import generatePicker from 'antd/es/date-picker/generatePicker';
+import 'antd/es/date-picker/style/index';
+
+const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig);
+
+export default DatePicker;
+```
+
+#### TimePicker.tsx
+
+新建 `src/components/TimePicker.tsx`。
+
+编写如下代码:
+
+```tsx
+import { Dayjs } from 'dayjs';
+import * as React from 'react';
+import DatePicker from './DatePicker';
+import { PickerTimeProps } from 'antd/es/date-picker/generatePicker';
+import { Omit } from 'antd/es/_util/type';
+
+export interface TimePickerProps extends Omit<PickerTimeProps<Dayjs>, 'picker'> {}
+
+const TimePicker = React.forwardRef<any, TimePickerProps>((props, ref) => {
+  return <DatePicker {...props} picker="time" mode={undefined} ref={ref} />;
+});
+
+TimePicker.displayName = 'TimePicker';
+
+export default TimePicker;
+```
+
+#### Calendar.tsx
+
+新建 `src/components/Calendar.tsx`。
+
+编写如下代码:
+
+```tsx
+import { Dayjs } from 'dayjs';
+import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
+import generateCalendar from 'antd/es/calendar/generateCalendar';
+import 'antd/es/calendar/style';
+
+const Calendar = generateCalendar<Dayjs>(dayjsGenerateConfig);
+
+export default Calendar;
+```
+
+#### 导出自定义组件
+
+新建 `src/components/index.tsx`。
+
+编写如下代码:
+
+```tsx
+export { default as DatePicker } from './DatePicker';
+export { default as Calendar } from './Calendar';
+export { default as TimePicker } from './TimePicker';
+```
+
+#### 使用自定义组件
+
+修改 `src/App.tsx`，引入 `dayjs` 和自定义的组件。
+
+```diff
+- import { DatePicker, Calendar } from 'antd';
+- import format from 'moment';
+
++ import { DatePicker, TimePicker, Calendar } from './components';
++ import format from 'dayjs';
+```
+
+如果按照上述步骤无法正确运行的话，你可以参考[antd4-generate-picker/antd-ts](https://github.com/xiaohuoni/antd4-generate-picker/tree/master/antd-ts)。
+
+如果你需要 JavaScript 代码，你可以参考 [antd4-generate-picker/antd-demo](https://github.com/xiaohuoni/antd4-generate-picker/tree/master/antd-demo)。
+
+如果你熟悉 [umi](https://umijs.org/)，你可以参考 [antd4-use-dayjs-replace-moment](https://github.com/xiaohuoni/antd4-use-dayjs-replace-moment)。
+
+### Webpack 配置替换
+
+我们还提供另一种实现方式。使用 `antd-dayjs-webpack-plugin` 插件，无需对现有代码做任何修改直接替换成 `Day.js`。请参考 [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin)。

docs/react/i18n.en-US.md

@@ -1,5 +1,5 @@
 ---
-order: 9
+order: 10
 title: Internationalization
 ---
 

docs/react/i18n.zh-CN.md

@@ -1,5 +1,5 @@
 ---
-order: 9
+order: 10
 title: 国际化
 ---
 

docs/react/migration-v4.en-US.md

@@ -1,5 +1,5 @@
 ---
-order: 7
+order: 8
 title: V3 to V4
 ---
 

docs/react/migration-v4.zh-CN.md

@@ -1,5 +1,5 @@
 ---
-order: 7
+order: 8
 title: 从 v3 到 v4
 ---
 

docs/react/recommendation.en-US.md

@@ -1,5 +1,5 @@
 ---
-order: 8
+order: 9
 title: Third-Party Libraries
 ---
 

docs/react/recommendation.zh-CN.md

@@ -1,5 +1,5 @@
 ---
-order: 8
+order: 9
 title: 社区精选组件
 ---