diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md index 8672b909c2..a57e84b800 100644 --- a/components/calendar/index.en-US.md +++ b/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) diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md index 4ac828c885..954efd3331 100644 --- a/components/calendar/index.zh-CN.md +++ b/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) diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index b477c30443..fe158de247 100644 --- a/components/date-picker/index.en-US.md +++ b/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) diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index 1d300cae44..64f0ae1f6d 100644 --- a/components/date-picker/index.zh-CN.md +++ b/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) diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md index 0a0fed219e..c1f453e270 100644 --- a/components/time-picker/index.en-US.md +++ b/components/time-picker/index.en-US.md @@ -60,3 +60,7 @@ import moment from 'moment'; | focus() | get focus | | + +## FAQ + +- [How to use TimePicker with customize date library like dayjs](/docs/react/generate-picker#TimePicker) diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md index 62400229dd..b288a8eb56 100644 --- a/components/time-picker/index.zh-CN.md +++ b/components/time-picker/index.zh-CN.md @@ -61,3 +61,7 @@ import moment from 'moment'; | focus() | 获取焦点 | | + +## FAQ + +- [如何在 TimePicker 中使用自定义日期库（如 dayjs ）](/docs/react/generate-picker#TimePicker) diff --git a/docs/react/contributing.en-US.md b/docs/react/contributing.en-US.md index b26b7efcdf..9649c4000d 100644 --- a/docs/react/contributing.en-US.md +++ b/docs/react/contributing.en-US.md @@ -1,5 +1,5 @@ --- -order: 11 +order: 12 title: Contributing toc: false --- diff --git a/docs/react/contributing.zh-CN.md b/docs/react/contributing.zh-CN.md index 9931878aaa..5816b9b025 100644 --- a/docs/react/contributing.zh-CN.md +++ b/docs/react/contributing.zh-CN.md @@ -1,5 +1,5 @@ --- -order: 11 +order: 12 title: 贡献指南 toc: false --- diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md index a172c1e077..a01ae548a2 100644 --- a/docs/react/customize-theme.en-US.md +++ b/docs/react/customize-theme.en-US.md @@ -1,5 +1,5 @@ --- -order: 6 +order: 7 title: Customize Theme --- diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md index 70baa56b14..d390317303 100644 --- a/docs/react/customize-theme.zh-CN.md +++ b/docs/react/customize-theme.zh-CN.md @@ -1,5 +1,5 @@ --- -order: 6 +order: 7 title: 定制主题 --- diff --git a/docs/react/faq.en-US.md b/docs/react/faq.en-US.md index f64b775e4b..f4f653d2b5 100644 --- a/docs/react/faq.en-US.md +++ b/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. diff --git a/docs/react/faq.zh-CN.md b/docs/react/faq.zh-CN.md index 2e7c292725..e6443bffc4 100644 --- a/docs/react/faq.zh-CN.md +++ b/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` 的时候它并没有生效。 diff --git a/docs/react/generate-picker.en-US.md b/docs/react/generate-picker.en-US.md new file mode 100644 index 0000000000..0490b1c9ca --- /dev/null +++ b/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(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, 'picker'> {} + +const TimePicker = React.forwardRef((props, ref) => { + return ; +}); + +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(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). diff --git a/docs/react/generate-picker.zh-CN.md b/docs/react/generate-picker.zh-CN.md new file mode 100644 index 0000000000..2ee4689f7b --- /dev/null +++ b/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(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, 'picker'> {} + +const TimePicker = React.forwardRef((props, ref) => { + return ; +}); + +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(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)。 diff --git a/docs/react/i18n.en-US.md b/docs/react/i18n.en-US.md index 31c2847d6d..3b6500a6f9 100644 --- a/docs/react/i18n.en-US.md +++ b/docs/react/i18n.en-US.md @@ -1,5 +1,5 @@ --- -order: 9 +order: 10 title: Internationalization --- diff --git a/docs/react/i18n.zh-CN.md b/docs/react/i18n.zh-CN.md index 96dd4f1c93..61b401abe2 100644 --- a/docs/react/i18n.zh-CN.md +++ b/docs/react/i18n.zh-CN.md @@ -1,5 +1,5 @@ --- -order: 9 +order: 10 title: 国际化 --- diff --git a/docs/react/migration-v4.en-US.md b/docs/react/migration-v4.en-US.md index ed61d99981..ebdec2ab20 100644 --- a/docs/react/migration-v4.en-US.md +++ b/docs/react/migration-v4.en-US.md @@ -1,5 +1,5 @@ --- -order: 7 +order: 8 title: V3 to V4 --- diff --git a/docs/react/migration-v4.zh-CN.md b/docs/react/migration-v4.zh-CN.md index eaa3412148..0edbc68463 100644 --- a/docs/react/migration-v4.zh-CN.md +++ b/docs/react/migration-v4.zh-CN.md @@ -1,5 +1,5 @@ --- -order: 7 +order: 8 title: 从 v3 到 v4 --- diff --git a/docs/react/recommendation.en-US.md b/docs/react/recommendation.en-US.md index 18d605a0d1..df5fcb1aa3 100644 --- a/docs/react/recommendation.en-US.md +++ b/docs/react/recommendation.en-US.md @@ -1,5 +1,5 @@ --- -order: 8 +order: 9 title: Third-Party Libraries --- diff --git a/docs/react/recommendation.zh-CN.md b/docs/react/recommendation.zh-CN.md index df01ee6126..86b292469b 100644 --- a/docs/react/recommendation.zh-CN.md +++ b/docs/react/recommendation.zh-CN.md @@ -1,5 +1,5 @@ --- -order: 8 +order: 9 title: 社区精选组件 ---