From 04b728e6f5155c71373bdfa8c53f9103fb5e1723 Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Tue, 30 Jun 2020 16:36:58 +0800 Subject: [PATCH] docs: format api cascader/datepicker/form (#25307) --- components/cascader/index.en-US.md | 64 ++++++------ components/cascader/index.zh-CN.md | 26 ++--- components/date-picker/index.en-US.md | 138 +++++++++++++------------- components/date-picker/index.zh-CN.md | 22 ++-- components/form/index.en-US.md | 26 ++--- components/form/index.zh-CN.md | 2 +- 6 files changed, 139 insertions(+), 139 deletions(-) diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md index a22e9cfd75..9b940d3aff 100644 --- a/components/cascader/index.en-US.md +++ b/components/cascader/index.en-US.md @@ -21,43 +21,43 @@ Cascade selection box. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| allowClear | whether allow clear | boolean | true | | -| autoFocus | get focus when component mounted | boolean | false | | -| bordered | whether has border style | boolean | true | | -| changeOnSelect | change value on each selection if set to true, see above demo for details | boolean | false | | -| className | additional css class | string | - | | -| defaultValue | initial selected value | string\[] \| number\[] | \[] | | -| disabled | whether disabled select | boolean | false | | -| displayRender | render function of displaying selected options | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` | | -| expandTrigger | expand current item when click or hover, one of 'click' 'hover' | string | `click` | | -| expandIcon | customize the current item expand icon | ReactNode | - | 4.4.0 | -| fieldNames | custom field name for label and value and children | object | `{ label: 'label', value: 'value', children: 'children' }` | | -| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative.[example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body | | -| loadData | To load option lazily, and it cannot work with `showSearch` | `(selectedOptions) => void` | - | | -| notFoundContent | Specify content to show when no result matches. | string | `Not Found` | | -| options | data options of cascade | [Option](#Option)[] | - | | -| placeholder | input placeholder | string | 'Please select' | | -| popupClassName | additional className of popup overlay | string | - | | -| popupPlacement | use preset popup align config from builtinPlacements：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | | -| popupVisible | set visible of cascader popup | boolean | - | | -| showSearch | Whether show search input in single mode. | boolean\|object | false | | -| size | input size | `large` \| `middle` \| `small` | | | -| style | additional style | CSSProperties | - | | +| allowClear | Whether allow clear | boolean | true | | +| autoFocus | If get focus when component mounted | boolean | false | | +| bordered | Whether has border style | boolean | true | | +| changeOnSelect | Change value on each selection if set to true, see above demo for details | boolean | false | | +| className | The additional css class | string | - | | +| defaultValue | Initial selected value | string\[] \| number\[] | \[] | | +| disabled | Whether disabled select | boolean | false | | +| displayRender | The render function of displaying selected options | (label, selectedOptions) => ReactNode | label => label.join(`/`) | | +| expandTrigger | expand current item when click or hover, one of `click` `hover` | string | `click` | | +| expandIcon | Customize the current item expand icon | ReactNode | - | 4.4.0 | +| fieldNames | Custom field name for label and value and children | object | { label: `label`, value: `value`, children: `children` } | | +| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body | | +| loadData | To load option lazily, and it cannot work with `showSearch` | (selectedOptions) => void | - | | +| notFoundContent | Specify content to show when no result matches | string | `Not Found` | | +| options | The data options of cascade | [Option](#Option)[] | - | | +| placeholder | The input placeholder | string | `Please select` | | +| popupClassName | The additional className of popup overlay | string | - | | +| popupPlacement | Use preset popup align config from builtinPlacements：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | | +| popupVisible | Set visible of cascader popup | boolean | - | | +| showSearch | Whether show search input in single mode | boolean \| object | false | | +| size | The input size | `large` \| `middle` \| `small` | - | | +| style | The additional style | CSSProperties | - | | | suffixIcon | The custom suffix icon | ReactNode | - | | -| value | selected value | string\[] \| number\[] | - | | -| dropdownRender | Customize dropdown content | `(menus: ReactNode) => ReactNode` | - | 4.4.0 | -| onChange | callback when finishing cascader select | `(value, selectedOptions) => void` | - | | -| onPopupVisibleChange | callback when popup shown or hidden | `(value) => void` | - | | +| value | The selected value | string\[] \| number\[] | - | | +| dropdownRender | Customize dropdown content | (menus: ReactNode) => ReactNode | - | 4.4.0 | +| onChange | Callback when finishing cascader select | (value, selectedOptions) => void | - | | +| onPopupVisibleChange | Callback when popup shown or hidden | (value) => void | - | | Fields in `showSearch`: | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| filter | The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded. | `function(inputValue, path): boolean` | | | +| filter | The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded | function(inputValue, path): boolean | - | | | limit | Set the count of filtered items | number \| false | 50 | | -| matchInputWidth | Whether the width of result list equals to input's | boolean | | | -| render | Used to render filtered options. | `function(inputValue, path): ReactNode` | | | -| sort | Used to sort filtered options. | `function(a, b, inputValue)` | | | +| matchInputWidth | Whether the width of result list equals to input's | boolean | true | | +| render | Used to render filtered options | function(inputValue, path): ReactNode | - | | +| sort | Used to sort filtered options | function(a, b, inputValue) | - | | ### Option @@ -74,5 +74,5 @@ interface Option { | Name | Description | Version | | ------- | ------------ | ------- | -| blur() | remove focus | | -| focus() | get focus | | +| blur() | Remove focus | | +| focus() | Get focus | | diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md index 51e3d10833..03fb14f2fb 100644 --- a/components/cascader/index.zh-CN.md +++ b/components/cascader/index.zh-CN.md @@ -29,36 +29,36 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg | className | 自定义类名 | string | - | | | defaultValue | 默认的选中项 | string\[] \| number\[] | \[] | | | disabled | 禁用 | boolean | false | | -| displayRender | 选择后展示的渲染函数 | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` | | +| displayRender | 选择后展示的渲染函数 | (label, selectedOptions) => ReactNode | label => label.join(`/`) | | | expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | `click` | | | expandIcon | 自定义次级菜单展开图标 | ReactNode | - | 4.4.0 | -| fieldNames | 自定义 options 中 label name children 的字段 | object | `{ label: 'label', value: 'value', children: 'children' }` | | -| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body | | -| loadData | 用于动态加载选项，无法与 `showSearch` 一起使用 | `(selectedOptions) => void` | - | | +| fieldNames | 自定义 options 中 label name children 的字段 | object | { label: `label`, value: `value`, children: `children` } | | +| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body | | +| loadData | 用于动态加载选项，无法与 `showSearch` 一起使用 | (selectedOptions) => void | - | | | notFoundContent | 当下拉列表为空时显示的内容 | string | `Not Found` | | | options | 可选项数据源 | [Option](#Option)[] | - | | -| placeholder | 输入框占位文本 | string | '请选择' | | +| placeholder | 输入框占位文本 | string | `请选择` | | | popupClassName | 自定义浮层类名 | string | - | | -| popupPlacement | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` | Enum | `bottomLeft` | | +| popupPlacement | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | | | popupVisible | 控制浮层显隐 | boolean | - | | | showSearch | 在选择框中显示搜索框 | boolean | false | | | size | 输入框大小 | `large` \| `middle` \| `small` | - | | | style | 自定义样式 | CSSProperties | - | | | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | | | value | 指定选中项 | string\[] \| number\[] | - | | -| dropdownRender | 自定义下拉框内容 | `(menus: ReactNode) => ReactNode` | - | 4.4.0 | -| onChange | 选择完成后的回调 | `(value, selectedOptions) => void` | - | | -| onPopupVisibleChange | 显示/隐藏浮层的回调 | `(value) => void` | - | | +| dropdownRender | 自定义下拉框内容 | (menus: ReactNode) => ReactNode | - | 4.4.0 | +| onChange | 选择完成后的回调 | (value, selectedOptions) => void | - | | +| onPopupVisibleChange | 显示/隐藏浮层的回调 | (value) => void | - | | `showSearch` 为对象时，其中的字段： | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| filter | 接收 `inputValue` `path` 两个参数，当 `path` 符合筛选条件时，应返回 true，反之则返回 false。 | `function(inputValue, path): boolean` | | | +| filter | 接收 `inputValue` `path` 两个参数，当 `path` 符合筛选条件时，应返回 true，反之则返回 false | function(inputValue, path): boolean | - | | | limit | 搜索结果展示数量 | number \| false | 50 | | -| matchInputWidth | 搜索结果列表是否与输入框同宽 | boolean | | | -| render | 用于渲染 filter 后的选项 | `function(inputValue, path): ReactNode` | | | -| sort | 用于排序 filter 后的选项 | `function(a, b, inputValue)` | | | +| matchInputWidth | 搜索结果列表是否与输入框同宽 | boolean | true | | +| render | 用于渲染 filter 后的选项 | function(inputValue, path): ReactNode | - | | +| sort | 用于排序 filter 后的选项 | function(a, b, inputValue) | - | | ### Option diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index 38c186f33b..c6b1a7a160 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -48,49 +48,49 @@ The following APIs are shared by DatePicker, YearPicker, MonthPicker, RangePicke | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | allowClear | Whether to show clear button | boolean | true | | -| autoFocus | get focus when component mounted | boolean | false | | -| className | picker className | string | '' | | -| dateRender | custom rendering function for date cells | function(currentDate: moment, today: moment) => React.ReactNode | - | | -| disabled | determine whether the DatePicker is disabled | boolean | false | | -| disabledDate | specify the date that cannot be selected | (currentDate: moment) => boolean | - | | -| dropdownClassName | to customize the className of the popup calendar | string | - | | -| getPopupContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | | -| locale | localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | | -| mode | picker panel mode（[Cannot select year or month anymore?](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?) | `time` \| `date` \| `month` \| `year` \| `decade` | - | | -| open | open state of picker | boolean | - | | -| picker | Set picker type | `date` \| `week` \| `month` \| `quarter` (4.1.0) \| `year` | `date` | | -| placeholder | placeholder of date input | string \| \[string,string] | - | | -| popupStyle | to customize the style of the popup calendar | CSSProperties | {} | | -| size | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - | | -| bordered | whether has border style | boolean | true | | +| autoFocus | If get focus when component mounted | boolean | false | | +| className | The picker className | string | - | | +| dateRender | Custom rendering function for date cells | function(currentDate: moment, today: moment) => React.ReactNode | - | | +| disabled | Determine whether the DatePicker is disabled | boolean | false | | +| disabledDate | Specify the date that cannot be selected | (currentDate: moment) => boolean | - | | +| dropdownClassName | To customize the className of the popup calendar | string | - | | +| getPopupContainer | To set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | | +| locale | Localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | | +| mode | The picker panel mode（ [Cannot select year or month anymore?](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?) ) | `time` \| `date` \| `month` \| `year` \| `decade` | - | | +| open | The open state of picker | boolean | - | | +| picker | Set picker type | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter`: 4.1.0 | +| placeholder | The placeholder of date input | string \| \[string,string] | - | | +| popupStyle | To customize the style of the popup calendar | CSSProperties | {} | | +| size | The determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - | | +| bordered | Whether has border style | boolean | true | | | suffixIcon | The custom suffix icon | ReactNode | - | | -| style | to customize the style of the input box | CSSProperties | {} | | -| onOpenChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(open) | - | | -| onPanelChange | callback when picker panel mode is changed | function(value, mode) | - | | +| style | To customize the style of the input box | CSSProperties | {} | | +| onOpenChange | Callback function, can be executed whether the popup calendar is popped up or closed | function(open) | - | | +| onPanelChange | Callback when picker panel mode is changed | function(value, mode) | - | | | inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | | ### Common Methods | Name | Description | Version | | ------- | ------------ | ------- | -| blur() | remove focus | | -| focus() | get focus | | +| blur() | Remove focus | | +| focus() | Get focus | | ### DatePicker | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| defaultValue | to set default date, if start time or end time is null or undefined, the date range will be an open interval | [moment](http://momentjs.com/) | - | | -| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | | -| disabledTime | to specify the time that cannot be selected | function(date) | - | | -| format | to set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting. | string \| string[] | "YYYY-MM-DD" | | -| renderExtraFooter | render extra footer in panel | (mode) => React.ReactNode | - | | -| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) | | -| showTime.defaultValue | to set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() | | -| showToday | whether to show "Today" button | boolean | true | | -| value | to set date | [moment](http://momentjs.com/) | - | | -| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | | -| onOk | callback when click ok button | function() | - | | +| defaultValue | To set default date, if start time or end time is null or undefined, the date range will be an open interval | [moment](http://momentjs.com/) | - | | +| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | | +| disabledTime | To specify the time that cannot be selected | function(date) | - | | +| format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting | string \| string[] | `YYYY-MM-DD` | | +| renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - | | +| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) | | +| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() | | +| showToday | Whether to show `Today` button | boolean | true | | +| value | To set date | [moment](http://momentjs.com/) | - | | +| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | | +| onOk | Callback when click ok button | function() | - | | | onPanelChange | Callback function for panel changing | function(value, mode) | - | | | showNow | Whether to show 'Now' button on panel when `showTime` is set | boolean | - | 4.4.0 | @@ -98,12 +98,12 @@ The following APIs are shared by DatePicker, YearPicker, MonthPicker, RangePicke | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| defaultValue | to set default date | [moment](http://momentjs.com/) | - | | -| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | | -| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY" | | -| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - | | -| value | to set date | [moment](http://momentjs.com/) | - | | -| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | | +| defaultValue | To set default date | [moment](http://momentjs.com/) | - | | +| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | | +| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY` | | +| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | | +| value | To set date | [moment](http://momentjs.com/) | - | | +| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | | ### QuarterPicker @@ -111,55 +111,55 @@ Added in `4.1.0`. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| defaultValue | to set default date | [moment](http://momentjs.com/) | - | | -| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | | -| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-\QQ" | | -| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - | | -| value | to set date | [moment](http://momentjs.com/) | - | | -| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | | +| defaultValue | To set default date | [moment](http://momentjs.com/) | - | | +| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | | +| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-\QQ` | | +| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | | +| value | To set date | [moment](http://momentjs.com/) | - | | +| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | | ### MonthPicker | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| defaultValue | to set default date | [moment](http://momentjs.com/) | - | | -| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | | -| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM" | | +| defaultValue | To set default date | [moment](http://momentjs.com/) | - | | +| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | | +| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-MM` | | | monthCellRender | Custom month cell content render method | function(date, locale): ReactNode | - | | -| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - | | -| value | to set date | [moment](http://momentjs.com/) | - | | -| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | | +| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | | +| value | To set date | [moment](http://momentjs.com/) | - | | +| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | | ### WeekPicker | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| defaultValue | to set default date | [moment](http://momentjs.com/) | - | | -| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | | -| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-wo" | | -| value | to set date | [moment](http://momentjs.com/) | - | | -| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | | -| renderExtraFooter | render extra footer in panel | (mode) => React.ReactNode | - | | +| defaultValue | To set default date | [moment](http://momentjs.com/) | - | | +| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | | +| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-wo` | | +| value | To set date | [moment](http://momentjs.com/) | - | | +| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | | +| renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - | | ### RangePicker | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | allowEmpty | Allow start or end input leave empty | \[boolean, boolean] | \[false, false] | | -| dateRender | Customize date cell. `info` argument is added in 4.3.0 | function(currentDate: moment, today: moment, info: { range: 'start' \| ''end }) => React.ReactNode | - | | -| defaultValue | to set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | | -| defaultPickerValue | to set default picker date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)\] | - | | -| disabled | disable start or end | \[boolean, boolean] | - | | -| disabledTime | to specify the time that cannot be selected | function(dates: \[moment, moment], partial: `'start'|'end'`) | - | | -| format | to set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting. | string \| string[] | "YYYY-MM-DD HH:mm:ss" | | -| ranges | preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - | | -| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - | | -| separator | set separator between inputs | string | `~` | | -| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) | | -| showTime.defaultValue | to set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] | | -| value | to set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | | -| onCalendarChange | a callback function, can be executed when the start time or the end time of the range is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | | -| onChange | a callback function, can be executed when the selected time is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | | +| dateRender | Customize date cell. `info` argument is added in 4.3.0 | function(currentDate: moment, today: moment, info: { range: `start` \| `end` }) => React.ReactNode | - | | +| defaultValue | To set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | | +| defaultPickerValue | To set default picker date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)\] | - | | +| disabled | If disable start or end | \[boolean, boolean] | - | | +| disabledTime | To specify the time that cannot be selected | function(dates: \[moment, moment], partial: `start` \| `end`) | - | | +| format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting | string \| string[] | `YYYY-MM-DD HH:mm:ss` | | +| ranges | The preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - | | +| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | | +| separator | Set separator between inputs | string | `~` | | +| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) | | +| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] | | +| value | To set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | | +| onCalendarChange | Callback function, can be executed when the start time or the end time of the range is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | | +| onChange | Callback function, can be executed when the selected time is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | |