From fd57f4c12deaafcdfda9c93d131a0c5d9e976824 Mon Sep 17 00:00:00 2001 From: qubaoming Date: Thu, 14 Apr 2016 12:32:25 +0800 Subject: [PATCH 1/7] date-picker extend options --- components/date-picker/index.md | 7 ++++++- components/date-picker/wrapPicker.jsx | 13 ++++++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/components/date-picker/index.md b/components/date-picker/index.md index ed131d744f..d91b936789 100644 --- a/components/date-picker/index.md +++ b/components/date-picker/index.md @@ -34,9 +34,14 @@ english: DatePicker | popupStyle | 格外的弹出日历样式 | object | {} | | size | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string | 无 | | locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/issues/424) | -| showTime | 增加时间选择功能 | bool | false | | onOk | 点击确定按钮的回调 | function(Date value) | 无 | | getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 | +| showTime | 增加时间选择功能 | bool | false | +| timeFormat | 时间选择功能的时间格式 | string | "HH:mm:ss"、"HH:mm"、"mm:ss" | +| timeHideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | +| timeDisabled | 禁用全部操作 | bool | false | +| timeDisabledHours | 禁止时间选择小时选项 | function() | 无 | +| timeDisabledMinutes | 禁止选时间选择分钟选项 | function(selectedHour) | 无 | ### MonthPicker diff --git a/components/date-picker/wrapPicker.jsx b/components/date-picker/wrapPicker.jsx index 3b1e1cd8df..1b9d0e34ed 100644 --- a/components/date-picker/wrapPicker.jsx +++ b/components/date-picker/wrapPicker.jsx @@ -94,12 +94,23 @@ export default function wrapPicker(Picker, defaultFormat) { }); const locale = this.getLocale(); + const showSecond = props.timeFormat && props.timeFormat.indexOf('ss') >= 0; + const showHour = props.timeFormat && props.timeFormat.indexOf('HH') >= 0; + const timePicker = props.showTime ? ( + transitionName="slide-up" + hideDisabledOptions={props.timeHideDisabledOptions} + disabled={props.timeDisabled} + disabledHours={props.timeDisabledHours} + disabledMinutes={props.timeDisabledMinutes} + formatter={new DateTimeFormat(props.timeFormat || 'HH:mm:ss')} + showSecond={showSecond} + showHour={showHour} + /> ) : null; return ( From a674657287735163d85fa38a4ab705054f932cdf Mon Sep 17 00:00:00 2001 From: qubaoming Date: Thu, 14 Apr 2016 15:14:17 +0800 Subject: [PATCH 2/7] data-picker extent options --- components/date-picker/index.md | 7 +------ components/date-picker/wrapPicker.jsx | 10 +--------- 2 files changed, 2 insertions(+), 15 deletions(-) diff --git a/components/date-picker/index.md b/components/date-picker/index.md index d91b936789..04c86530a8 100644 --- a/components/date-picker/index.md +++ b/components/date-picker/index.md @@ -36,12 +36,7 @@ english: DatePicker | locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/issues/424) | | onOk | 点击确定按钮的回调 | function(Date value) | 无 | | getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 | -| showTime | 增加时间选择功能 | bool | false | -| timeFormat | 时间选择功能的时间格式 | string | "HH:mm:ss"、"HH:mm"、"mm:ss" | -| timeHideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | -| timeDisabled | 禁用全部操作 | bool | false | -| timeDisabledHours | 禁止时间选择小时选项 | function() | 无 | -| timeDisabledMinutes | 禁止选时间选择分钟选项 | function(selectedHour) | 无 | +| showTime | 增加时间选择功能 | object | [TimePicker Options](http://ant.design/components/time-picker/#api) | ### MonthPicker diff --git a/components/date-picker/wrapPicker.jsx b/components/date-picker/wrapPicker.jsx index 1b9d0e34ed..b331641e15 100644 --- a/components/date-picker/wrapPicker.jsx +++ b/components/date-picker/wrapPicker.jsx @@ -94,8 +94,6 @@ export default function wrapPicker(Picker, defaultFormat) { }); const locale = this.getLocale(); - const showSecond = props.timeFormat && props.timeFormat.indexOf('ss') >= 0; - const showHour = props.timeFormat && props.timeFormat.indexOf('HH') >= 0; const timePicker = props.showTime ? ( ) : null; From 6b3a97b902206bd954f87500be987e6865c6cb97 Mon Sep 17 00:00:00 2001 From: qubaoming Date: Thu, 14 Apr 2016 15:42:03 +0800 Subject: [PATCH 3/7] change timepicker options to rctimepicker options --- components/date-picker/demo/time.md | 2 +- components/date-picker/wrapPicker.jsx | 10 ++++++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/components/date-picker/demo/time.md b/components/date-picker/demo/time.md index 88eabea919..7328e1b1a0 100644 --- a/components/date-picker/demo/time.md +++ b/components/date-picker/demo/time.md @@ -13,6 +13,6 @@ function onChange(value) { } ReactDOM.render( - + , mountNode); ```` diff --git a/components/date-picker/wrapPicker.jsx b/components/date-picker/wrapPicker.jsx index b331641e15..e9f6fafb1d 100644 --- a/components/date-picker/wrapPicker.jsx +++ b/components/date-picker/wrapPicker.jsx @@ -95,6 +95,12 @@ export default function wrapPicker(Picker, defaultFormat) { const locale = this.getLocale(); + const timeFormat = props.showTime && props.showTime.format; + const rcTimePickerProps = { + formatter: new DateTimeFormat(timeFormat || 'HH:mm:ss'), + showSecond: timeFormat && timeFormat.indexOf('ss') >= 0, + showHour: timeFormat && timeFormat.indexOf('HH') >= 0 + }; const timePicker = props.showTime ? ( ) : null; + + console.log(timePicker) + console.log('....') return ( Date: Thu, 14 Apr 2016 15:48:16 +0800 Subject: [PATCH 4/7] change timepicker options to rctimepicker options --- components/date-picker/demo/time.md | 2 +- components/date-picker/wrapPicker.jsx | 9 +++------ 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/components/date-picker/demo/time.md b/components/date-picker/demo/time.md index 7328e1b1a0..88eabea919 100644 --- a/components/date-picker/demo/time.md +++ b/components/date-picker/demo/time.md @@ -13,6 +13,6 @@ function onChange(value) { } ReactDOM.render( - + , mountNode); ```` diff --git a/components/date-picker/wrapPicker.jsx b/components/date-picker/wrapPicker.jsx index e9f6fafb1d..34dd1b686c 100644 --- a/components/date-picker/wrapPicker.jsx +++ b/components/date-picker/wrapPicker.jsx @@ -97,9 +97,9 @@ export default function wrapPicker(Picker, defaultFormat) { const timeFormat = props.showTime && props.showTime.format; const rcTimePickerProps = { - formatter: new DateTimeFormat(timeFormat || 'HH:mm:ss'), - showSecond: timeFormat && timeFormat.indexOf('ss') >= 0, - showHour: timeFormat && timeFormat.indexOf('HH') >= 0 + formatter: new DateTimeFormat(timeFormat || 'HH:mm:ss'), + showSecond: timeFormat && timeFormat.indexOf('ss') >= 0, + showHour: timeFormat && timeFormat.indexOf('HH') >= 0 }; const timePicker = props.showTime ? ( ) : null; - - console.log(timePicker) - console.log('....') return ( Date: Thu, 14 Apr 2016 16:48:34 +0800 Subject: [PATCH 5/7] adjust props position --- components/date-picker/wrapPicker.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/date-picker/wrapPicker.jsx b/components/date-picker/wrapPicker.jsx index 34dd1b686c..d4933f15c4 100644 --- a/components/date-picker/wrapPicker.jsx +++ b/components/date-picker/wrapPicker.jsx @@ -103,12 +103,12 @@ export default function wrapPicker(Picker, defaultFormat) { }; const timePicker = props.showTime ? ( ) : null; From 2d72bc58d2d3c1dde094f414c824562074ab6771 Mon Sep 17 00:00:00 2001 From: qubaoming Date: Fri, 15 Apr 2016 14:47:39 +0800 Subject: [PATCH 6/7] adjust props position & range-picker add showTime options --- components/date-picker/index.md | 3 ++- components/date-picker/wrapPicker.jsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/components/date-picker/index.md b/components/date-picker/index.md index 04c86530a8..23ecf15ad0 100644 --- a/components/date-picker/index.md +++ b/components/date-picker/index.md @@ -36,7 +36,7 @@ english: DatePicker | locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/issues/424) | | onOk | 点击确定按钮的回调 | function(Date value) | 无 | | getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 | -| showTime | 增加时间选择功能 | object | [TimePicker Options](http://ant.design/components/time-picker/#api) | +| showTime | 增加时间选择功能 | Object or Boolean | [TimePicker Options](http://ant.design/components/time-picker/#api) | ### MonthPicker @@ -61,6 +61,7 @@ english: DatePicker | defaultValue | 默认日期 | [string/Date, string/Date] | 无 | | format | 展示的日期格式 | string | "yyyy-MM-dd HH:mm:ss" | | onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date[], dateString[]) | 无 | +| showTime | 增加时间选择功能 | Object or Boolean | [TimePicker Options](http://ant.design/components/time-picker/#api) | `disabled` `style` `popupStyle` `size` `locale` `showTime` `onOk` `getCalendarContainer` 属性与 DatePicker 的一致。 diff --git a/components/date-picker/wrapPicker.jsx b/components/date-picker/wrapPicker.jsx index d4933f15c4..b53d802237 100644 --- a/components/date-picker/wrapPicker.jsx +++ b/components/date-picker/wrapPicker.jsx @@ -103,8 +103,8 @@ export default function wrapPicker(Picker, defaultFormat) { }; const timePicker = props.showTime ? ( Date: Fri, 15 Apr 2016 23:54:47 +0800 Subject: [PATCH 7/7] update demo --- components/date-picker/demo/time.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/date-picker/demo/time.md b/components/date-picker/demo/time.md index 88eabea919..387d589140 100644 --- a/components/date-picker/demo/time.md +++ b/components/date-picker/demo/time.md @@ -3,7 +3,7 @@ order: 4 title: 日期时间选择 --- -增加选择时间功能。不要修改时间的格式 `HH:mm:ss`。 +增加选择时间功能，当 `showTime` 为一个对象时，其属性会传递给内建的 `TimePicker`。 ````jsx import { DatePicker } from 'antd';