From 703cf318684526368854b1428dfc9817fb39d44a Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 28 Mar 2016 12:18:30 +0800 Subject: [PATCH] Add dateString to DatePicker & TimePicker onChange close #1104 --- components/date-picker/RangePicker.jsx | 8 +++++--- components/date-picker/demo/basic.md | 4 ++-- components/date-picker/demo/range.md | 3 ++- components/date-picker/index.jsx | 2 +- components/date-picker/index.md | 4 ++-- components/time-picker/demo/basic.md | 7 ++----- components/time-picker/index.jsx | 5 ++++- components/time-picker/index.md | 2 +- 8 files changed, 19 insertions(+), 16 deletions(-) diff --git a/components/date-picker/RangePicker.jsx b/components/date-picker/RangePicker.jsx index 57d1525a6d..1f15fdbcc8 100644 --- a/components/date-picker/RangePicker.jsx +++ b/components/date-picker/RangePicker.jsx @@ -52,9 +52,11 @@ export default React.createClass({ if (!('value' in this.props)) { this.setState({ value }); } - const startTime = value[0] ? new Date(value[0].getTime()) : null; - const endTime = value[1] ? new Date(value[1].getTime()) : null; - this.props.onChange([startTime, endTime]); + const startDate = value[0] ? new Date(value[0].getTime()) : null; + const endDate = value[1] ? new Date(value[1].getTime()) : null; + const startDateString = value[0] ? this.getFormatter().format(value[0]) : ''; + const endDateString = value[1] ? this.getFormatter().format(value[1]) : ''; + this.props.onChange([startDate, endDate], [startDateString, endDateString]); }, render() { const locale = this.getLocale(); diff --git a/components/date-picker/demo/basic.md b/components/date-picker/demo/basic.md index 43561477b3..5474339307 100644 --- a/components/date-picker/demo/basic.md +++ b/components/date-picker/demo/basic.md @@ -9,8 +9,8 @@ ````jsx import { DatePicker } from 'antd'; -function onChange(value) { - console.log(value); +function onChange(value, dateString) { + console.log(value, dateString); } ReactDOM.render(, mountNode); diff --git a/components/date-picker/demo/range.md b/components/date-picker/demo/range.md index 74c7b421e7..ea3ac41338 100644 --- a/components/date-picker/demo/range.md +++ b/components/date-picker/demo/range.md @@ -10,8 +10,9 @@ import { DatePicker } from 'antd'; const RangePicker = DatePicker.RangePicker; -function onChange(value) { +function onChange(value, dateString) { console.log('From: ', value[0], ', to: ', value[1]); + console.log('From: ', dateString[0], ', to: ', dateString[1]); } ReactDOM.render(
diff --git a/components/date-picker/index.jsx b/components/date-picker/index.jsx index 2d5c6431a4..fe0a8f13e4 100644 --- a/components/date-picker/index.jsx +++ b/components/date-picker/index.jsx @@ -45,7 +45,7 @@ function createPicker(TheCalendar, defaultFormat) { this.setState({ value }); } const timeValue = value ? new Date(value.getTime()) : null; - this.props.onChange(timeValue); + this.props.onChange(timeValue, value ? this.getFormatter().format(value) : ''); }, render() { const locale = this.getLocale(); diff --git a/components/date-picker/index.md b/components/date-picker/index.md index 9d9ad02a3f..ee79e83daf 100644 --- a/components/date-picker/index.md +++ b/components/date-picker/index.md @@ -29,7 +29,7 @@ | defaultValue | 默认日期 | string or Date | 无 | | format | 展示的日期格式，配置参考 [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format) | string | "yyyy-MM-dd" | | disabledDate | 不可选择的日期 | function | 无 | -| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(Date value) | 无 | +| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date, dateString) | 无 | | disabled | 禁用 | bool | false | | style | 自定义输入框样式 | object | {} | | popupStyle | 格外的弹出日历样式 | object | {} | @@ -46,7 +46,7 @@ | value | 日期 | [string/Date, string/Date] | 无 | | defaultValue | 默认日期 | [string/Date, string/Date] | 无 | | format | 展示的日期格式 | string | "yyyy-MM-dd HH:mm:ss" | -| onChange | 时间发生变化的回调，发生在用户选择时间时 | function([Date start, Date end]) | 无 | +| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date[], dateString[]) | 无 | `disabled` `style` `popupStyle` `size` `locale` `showTime` `onOk` `getCalendarContainer` 属性与 DatePicker 的一致。 diff --git a/components/time-picker/demo/basic.md b/components/time-picker/demo/basic.md index 45d8826cfc..bcac652163 100644 --- a/components/time-picker/demo/basic.md +++ b/components/time-picker/demo/basic.md @@ -9,11 +9,8 @@ ````jsx import { TimePicker } from 'antd'; -function onChange(time) { - console.log(time); - if (time) { - console.log(time.toLocaleTimeString('zh-CN', { hour12: false })); // Get time string - } +function onChange(time, timeString) { + console.log(time, timeString); } ReactDOM.render( diff --git a/components/time-picker/index.jsx b/components/time-picker/index.jsx index 8695b5e89a..c65f3e75df 100644 --- a/components/time-picker/index.jsx +++ b/components/time-picker/index.jsx @@ -67,7 +67,10 @@ const TimePicker = React.createClass({ }, handleChange(value) { - this.props.onChange(value ? new Date(value.getTime()) : null); + this.props.onChange( + value ? new Date(value.getTime()) : null, + value ? this.getFormatter().format(value) : '', + ); }, getLocale() { diff --git a/components/time-picker/index.md b/components/time-picker/index.md index b22cc60c81..0c4912c1ef 100644 --- a/components/time-picker/index.md +++ b/components/time-picker/index.md @@ -27,7 +27,7 @@ API | defaultValue | 初始默认时间 | string or Date | 无 | | value | 默认时间 | string or Date | 无 | | placeholder | 没有值的时候显示的内容 | string | "请选择时间" | -| onChange | 时间发生变化的回调 | function(Date value) | 无 | +| onChange | 时间发生变化的回调 | function(date, dateString) | 无 | | format | 展示的时间格式 | string | "HH:mm:ss"、"HH:mm"、"mm:ss" | | disabled | 禁用全部操作 | bool | false | | disabledHours | 禁止选择部分小时选项 | function() | 无 |