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