mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-05 23:46:28 +08:00
docs: update docs for DatePicker and so on
This commit is contained in:
Benjy Cui
parent
f7e480ad53
commit
eeb6ab5a01
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user