Mirrors
/
ant-design
mirror of https://github.com/ant-design/ant-design.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

docs: update docs for DatePicker and so on

Browse Source
pull/3628/head
Benjy Cui 8 years ago
parent f7e480ad53
commit eeb6ab5a01
2 changed files with 44 additions and 45 deletions
Show Stats Download Patch File Download Diff File

44
components/date-picker/index.en-US.md
Unescape Escape View File

@ -12,7 +12,7 @@ By clicking the input box, you can select a date from a popup calendar.
## API
### DatePicker
Note: Part of locale of DatePicker, MonthPicker, RangePicker is read from value. So, please set the locale of moment correctly.
```jsx
import moment from 'moment-timezone/moment-timezone';
@ -27,22 +27,31 @@ moment.tz.setDefault('Asia/Shanghai')
<DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />
```
| Property | Description | Type | Default |
### Common API
The following APIs are shared by DatePicker, MonthPicker, RangePicker.
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| value | to set date | [moment](http://momentjs.com/) | - |
| defaultValue | to set default date | [moment](http://momentjs.com/) | - |
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | String | "YYYY-MM-DD" |
| disabledDate | to specify the date that cannot be selected | function | - |
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - |
| allowClear | Whether to show clear button | bool | true |
| disabled | determine whether the DatePicker is disabled | Boolean | false |
| style | to customize the style of the input box | Object | {} |
| popupStyle | to customize the style of the popup calendar | Object | {} |
| size | determine the size of the input box, the height of `large` and `small`, are 32px and 22px respectively, while default size is 28px | String | - |
| locale | localization configuration | Object | [default](https://github.com/ant-design/ant-design/issues/424) |
| onOk | a callback function, can be executed when OK-button is clicked | function(Date value) | - |
| disabledDate | to specify the date that cannot be selected | function | - |
| getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |
### DatePicker
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| value | to set date | [moment](http://momentjs.com/) | - |
| defaultValue | to set default date | [moment](http://momentjs.com/) | - |
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | String | "YYYY-MM-DD" |
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - |
| open | open state of picker | bool | - |
| onOpenChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - |
| getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |
| showTime | to provide an additional time selection | Object/Boolean | [TimePicker Options](/components/time-picker/#api) |
### MonthPicker
@ -52,29 +61,18 @@ moment.tz.setDefault('Asia/Shanghai')
| value | to set date | [moment](http://momentjs.com/) | - |
| defaultValue | to set default date | [moment](http://momentjs.com/) | - |
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | String | "YYYY-MM" |
| disabledDate | to specify the date that cannot be selected | function | - |
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - |
| disabled | determine whether the MonthPicker is disabled | Boolean | false |
| style | to customize the style of the input box | Object | {} |
| popupStyle | to customize the style of the popup calendar | Object | {} |
| size | determine the size of the input box, the height of `large` and `small`, are 32px and 22px respectively, while default size is 28px | String | - |
| locale | localization configuration | Object | [default](https://github.com/ant-design/ant-design/issues/424) |
| getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |
### RangePicker
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| value | to set date | [moment, moment] | - |
| defaultValue | to set default date | [moment, moment] | - |
| value | to set date | [[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
| defaultValue | to set default date | [[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
| format | to set the date format | String | "YYYY-MM-DD HH:mm:ss" |
| onChange | a callback function, can be executed when the selected time is changing | function(dates: [moment, moment], dateStrings: [string, string]) | - |
| showTime | to provide an additional time selection | Object/Boolean | [TimePicker Options](/components/time-picker/#api) |
| disabledDate | to specify the date that cannot be selected | function(date: moment, dateString: string) | - |
| disabledTime | to specify the time that cannot be selected | function(dates: [moment, moment], partial: 'start'|'end') | - |
The following properties are the same with `DatePicker`: `disabled` `style` `popupStyle` `size` `locale` `showTime` `onOk` `getCalendarContainer`
| disabledTime | to specify the time that cannot be selected | function(dates: [moment, moment], partial: `'start'|'end'`) | - |
<style>
.code-box-demo .ant-calendar-picker {

45
components/date-picker/index.zh-CN.md
Unescape Escape View File

@ -13,7 +13,7 @@ subtitle: 日期选择框
## API
### DatePicker
注意：DatePicker、MonthPicker、RangePicker 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。
```jsx
import moment from 'moment-timezone/moment-timezone';
@ -28,51 +28,52 @@ moment.tz.setDefault('Asia/Shanghai')
<DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />
```
| 参数 | 说明 | 类型 | 默认值 |
### 共同的 API
以下 API 为 DatePicker、MonthPicker、RangePicker 共享的 API。
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------|----------|--------------|
| value | 日期 | [moment](http://momentjs.com/) | 无 |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
| disabledDate | 不可选择的日期 | function | 无 |
| onChange | 时间发生变化的回调 | function(date: moment, dateString: string) | 无 |
| allowClear | 是否显示清除按钮 | bool | true |
| disabled | 禁用 | bool | false |
| style | 自定义输入框样式 | object | {} |
| popupStyle | 格外的弹出日历样式 | object | {} |
| size | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string | 无 |
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/issues/424) |
| disabledDate | 不可选择的日期 | function | 无 |
| getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
### DatePicker
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------|----------|--------------|
| value | 日期 | [moment](http://momentjs.com/) | 无 |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
| onChange | 时间发生变化的回调 | function(date: moment, dateString: string) | 无 |
| open | 控制弹层是否展开 | bool | - |
| onOpenChange | 弹出日历和关闭日历的回调 | function(status) | 无 |
| getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
| showTime | 增加时间选择功能 | Object or Boolean | [TimePicker Options](/components/time-picker/#api) |
### MonthPicker
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------|----------|--------------|
| value | 日期 | moment | 无 |
| defaultValue | 默认日期 | moment | 无 |
| value | 日期 | [moment](http://momentjs.com/) | 无 |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM" |
| disabledDate | 不可选择的日期 | function | 无 |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | 无 |
| disabled | 禁用 | bool | false |
| style | 自定义输入框样式 | object | {} |
| popupStyle | 格外的弹出日历样式 | object | {} |
| size | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string | 无 |
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/issues/424) |
| getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
### RangePicker
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------|----------|--------------|
| value | 日期 | [moment, moment] | 无 |
| defaultValue | 默认日期 | [moment, moment] | 无 |
| value | 日期 | [[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | 无 |
| defaultValue | 默认日期 | [[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | 无 |
| format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(dates: [moment, moment], dateStrings: [string, string]) | 无 |
| showTime | 增加时间选择功能 | Object or Boolean | [TimePicker Options](/components/time-picker/#api) |
| disabledDate | 不可选择的日期 | function | 无 |
| disabledTime | 不可选择的时间 | function(dates: [moment, moment], partial: 'start'|'end') | 无 |
`disabled` `style` `popupStyle` `size` `locale` `showTime` `onOk` `getCalendarContainer` 属性与 DatePicker 的一致。
| disabledTime | 不可选择的时间 | function(dates: [moment, moment], partial: `'start'|'end'`) | 无 |
<style>
.code-box-demo .ant-calendar-picker {

Write Preview
Loading…
Cancel
Save