Add dateString to DatePicker & TimePicker onChange

close #1104

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 startDate = value[0] ? new Date(value[0].getTime()) : null;
-    const endTime = value[1] ? new Date(value[1].getTime()) : null;
+    const endDate = value[1] ? new Date(value[1].getTime()) : null;
-    this.props.onChange([startTime, endTime]);
+    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();

components/date-picker/demo/basic.md

@@ -9,8 +9,8 @@
 ````jsx
 import { DatePicker } from 'antd';
 
-function onChange(value) {
+function onChange(value, dateString) {
-  console.log(value);
+  console.log(value, dateString);
 }
 
 ReactDOM.render(<DatePicker onChange={onChange} />, mountNode);

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(<div>
   <RangePicker style={{ width: 184 }} onChange={onChange} />

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();

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 的一致。
 

components/time-picker/demo/basic.md

@@ -9,11 +9,8 @@
 ````jsx
 import { TimePicker } from 'antd';
 
-function onChange(time) {
+function onChange(time, timeString) {
-  console.log(time);
+  console.log(time, timeString);
-  if (time) {
-    console.log(time.toLocaleTimeString('zh-CN', { hour12: false })); // Get time string
-  }
 }
 
 ReactDOM.render(

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() {

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() | 无 |