diff --git a/components/date-picker/RangePicker.tsx b/components/date-picker/RangePicker.tsx
index 4353ab79a0..c4a61eb410 100644
--- a/components/date-picker/RangePicker.tsx
+++ b/components/date-picker/RangePicker.tsx
@@ -45,10 +45,7 @@ export default class RangePicker extends React.Component<any, any> {
 
   render() {
     const props = this.props;
-    const locale = props.locale;
-
-    const { disabledDate, showTime, getCalendarContainer, prefixCls,
-      transitionName, disabled, popupStyle, align, style, onOk } = this.props;
+    const { disabledDate, showTime, prefixCls, popupStyle, style, onOk, locale } = props;
     const state = this.state;
 
     const calendarClassName = classNames({
@@ -63,9 +60,7 @@ export default class RangePicker extends React.Component<any, any> {
       onOk: this.handleChange,
     };
     if (props.timePicker) {
-      pickerChangeHandler.onChange = (value) => {
-        this.handleChange(value);
-      };
+      pickerChangeHandler.onChange = value => this.handleChange(value);
     } else {
       calendarHandler = {};
     }
@@ -98,26 +93,21 @@ export default class RangePicker extends React.Component<any, any> {
 
     return (<span className={props.pickerClass} style={style}>
       <RcDatePicker
+        {...props}
         {...pickerChangeHandler}
-        transitionName={transitionName}
-        disabled={disabled}
         calendar={calendar}
         value={state.value}
         prefixCls={`${prefixCls}-picker-container`}
         style={popupStyle}
-        align={align}
-        getCalendarContainer={getCalendarContainer}
-        onOpen={props.toggleOpen}
-        onClose={props.toggleOpen}
       >
         {
           ({ value }) => {
             const start = value[0];
             const end = value[1];
             return (
-              <span className={props.pickerInputClass} disabled={disabled}>
+              <span className={props.pickerInputClass} disabled={props.disabled}>
                 <input
-                  disabled={disabled}
+                  disabled={props.disabled}
                   readOnly
                   value={(start && start.format(props.format)) || ''}
                   placeholder={startPlaceholder}
@@ -125,7 +115,7 @@ export default class RangePicker extends React.Component<any, any> {
                 />
                 <span className={`${prefixCls}-range-picker-separator`}> ~ </span>
                 <input
-                  disabled={disabled}
+                  disabled={props.disabled}
                   readOnly
                   value={(end && end.format(props.format)) || ''}
                   placeholder={endPlaceholder}
diff --git a/components/date-picker/createPicker.tsx b/components/date-picker/createPicker.tsx
index d2aa562b0c..5c6ebfed1d 100644
--- a/components/date-picker/createPicker.tsx
+++ b/components/date-picker/createPicker.tsx
@@ -72,11 +72,7 @@ export default function createPicker(TheCalendar) {
       let calendarHandler: Object = {
         onOk: this.handleChange,
         // fix https://github.com/ant-design/ant-design/issues/1902
-        onSelect: (value, cause) => {
-          if (cause && cause.source === 'todayButton') {
-            this.handleChange(value);
-          }
-        },
+        onSelect: value => this.handleChange(value),
       };
       if (props.showTime) {
         pickerChangeHandler = {};
@@ -113,18 +109,12 @@ export default function createPicker(TheCalendar) {
       return (
         <span className={props.pickerClass} style={assign({}, pickerStyle, props.style)}>
           <RcDatePicker
+            {...props}
             {...pickerChangeHandler}
-            transitionName={props.transitionName}
-            disabled={props.disabled}
             calendar={calendar}
             value={this.state.value}
             prefixCls={`${prefixCls}-picker-container`}
             style={props.popupStyle}
-            align={props.align}
-            getCalendarContainer={props.getCalendarContainer}
-            open={props.open}
-            onOpen={props.toggleOpen}
-            onClose={props.toggleOpen}
           >
             {
               ({ value }) => {
diff --git a/components/date-picker/demo/start-end.md b/components/date-picker/demo/start-end.md
index 9a95c9ba54..67a835e9f9 100644
--- a/components/date-picker/demo/start-end.md
+++ b/components/date-picker/demo/start-end.md
@@ -48,12 +48,12 @@ const DateRange = React.createClass({
   onEndChange(value) {
     this.onChange('endValue', value);
   },
-  handleStartToggle({ open }) {
+  handleStartOpenChange(open) {
     if (!open) {
       this.setState({ endOpen: true });
     }
   },
-  handleEndToggle({ open }) {
+  handleEndOpenChange(open) {
     this.setState({ endOpen: open });
   },
   render() {
@@ -66,7 +66,7 @@ const DateRange = React.createClass({
           value={this.state.startValue}
           placeholder="开始日期"
           onChange={this.onStartChange}
-          toggleOpen={this.handleStartToggle}
+          onOpenChange={this.handleStartOpenChange}
         />
         <DatePicker
           disabledDate={this.disabledEndDate}
@@ -76,7 +76,7 @@ const DateRange = React.createClass({
           placeholder="结束日期"
           onChange={this.onEndChange}
           open={this.state.endOpen}
-          toggleOpen={this.handleEndToggle}
+          onOpenChange={this.handleEndOpenChange}
         />
       </div>
     );
diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md
index 3d137b071c..264e07339f 100644
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@@ -41,7 +41,7 @@ moment.tz.setDefault('Asia/Shanghai')
 | 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) | - |
 | open | open state of picker | bool | - |
-| toggleOpen   | a callback function, can be executed whether the popup calendar is popped up or closed | function(open) | - |
+| 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](http://ant.design/components/time-picker/#api) |
 
diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md
index 595acec63c..8a46d015a1 100644
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@@ -41,7 +41,7 @@ moment.tz.setDefault('Asia/Shanghai')
 | size         | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string   | 无  |
 | locale       | 国际化配置 | object   | [默认配置](https://github.com/ant-design/ant-design/issues/424)  |
 | open | 控制弹层是否展开 | bool | - |
-| toggleOpen   | 弹出日历和关闭日历的回调 | function(open) | 无 |
+| onOpenChange   | 弹出日历和关闭日历的回调 | function(status) | 无 |
 | getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
 | showTime     | 增加时间选择功能  | Object or Boolean | [TimePicker Options](http://ant.design/components/time-picker/#api) |
 
diff --git a/components/date-picker/style/TimePicker.less b/components/date-picker/style/TimePicker.less
index f137bb8701..ae1d09e85d 100644
--- a/components/date-picker/style/TimePicker.less
+++ b/components/date-picker/style/TimePicker.less
@@ -24,6 +24,21 @@
     overflow: hidden;
   }
 
+  &-1-column,
+  &-1-column &-select {
+    width: 100%;
+  }
+  &-2-columns &-select {
+    width: 115px;
+  }
+  &-1-column &-select,
+  &-2-columns &-select {
+    li {
+      padding: 0;
+      text-align: center;
+    }
+  }
+
   &-input {
     margin: 0;
     padding: 0;
diff --git a/components/date-picker/wrapPicker.tsx b/components/date-picker/wrapPicker.tsx
index 3d9ce03a76..d4453d9303 100644
--- a/components/date-picker/wrapPicker.tsx
+++ b/components/date-picker/wrapPicker.tsx
@@ -4,6 +4,7 @@ import TimePickerPanel from 'rc-time-picker/lib/Panel';
 import classNames from 'classnames';
 import defaultLocale from './locale/zh_CN';
 import assign from 'object-assign';
+import warning from 'warning';
 
 export default function wrapPicker(Picker, defaultFormat?) {
   const PickerWrapper = React.createClass({
@@ -16,7 +17,7 @@ export default function wrapPicker(Picker, defaultFormat?) {
         },
         onOk() {
         },
-        toggleOpen() {
+        onOpenChange() {
         },
         locale: {},
         align: {
@@ -44,8 +45,18 @@ export default function wrapPicker(Picker, defaultFormat?) {
       return result;
     },
 
-    toggleOpen ({open}) {
-      this.props.toggleOpen({open});
+    handleOpenChange(open) {
+      const { onOpenChange, toggleOpen } = this.props;
+      onOpenChange(open);
+
+      if (toggleOpen) {
+        warning(
+          false,
+          '`toggleOpen` is deprecated and will be removed in the future, ' +
+          'please use `onOpenChange` instead'
+        );
+        toggleOpen({open});
+      }
     },
 
     render() {
@@ -63,17 +74,22 @@ export default function wrapPicker(Picker, defaultFormat?) {
 
       const locale = this.getLocale();
 
-      const timeFormat = props.showTime && props.showTime.format;
+      const timeFormat = (props.showTime && props.showTime.format) || 'HH:mm:ss';
       const rcTimePickerProps = {
-        format: timeFormat || 'HH:mm:ss',
-        showSecond: timeFormat && timeFormat.indexOf('ss') >= 0,
-        showHour: timeFormat && timeFormat.indexOf('HH') >= 0,
+        format: timeFormat,
+        showSecond: timeFormat.indexOf('ss') >= 0,
+        showHour: timeFormat.indexOf('HH') >= 0,
       };
+      const timePickerCls = classNames({
+        [`${prefixCls}-time-picker-1-column`]: !(rcTimePickerProps.showSecond || rcTimePickerProps.showHour),
+        [`${prefixCls}-time-picker-2-columns`]: rcTimePickerProps.showSecond !== rcTimePickerProps.showHour,
+      });
       const timePicker = props.showTime ? (
         <TimePickerPanel
           {...rcTimePickerProps}
           {...props.showTime}
           prefixCls={`${prefixCls}-time-picker`}
+          className={timePickerCls}
           placeholder={locale.timePickerLocale.placeholder}
           transitionName="slide-up"
         />
@@ -86,7 +102,7 @@ export default function wrapPicker(Picker, defaultFormat?) {
           pickerInputClass={pickerInputClass}
           locale={locale}
           timePicker={timePicker}
-          toggleOpen={this.toggleOpen}
+          onOpenChange={this.handleOpenChange}
         />
       );
     },
diff --git a/package.json b/package.json
index dc1be5ec8c..a2b90d4ac6 100644
--- a/package.json
+++ b/package.json
@@ -42,11 +42,11 @@
     "object-assign": "~4.1.0",
     "omit.js": "^0.1.0",
     "rc-animate": "~2.3.0",
-    "rc-calendar": "~7.1.0",
+    "rc-calendar": "~7.2.0",
     "rc-cascader": "~0.10.1",
     "rc-checkbox": "~1.4.0",
     "rc-collapse": "~1.6.4",
-    "rc-dialog": "~6.3.0",
+    "rc-dialog": "~6.4.0",
     "rc-dropdown": "~1.4.8",
     "rc-editor-mention": "~0.2.2",
     "rc-form": "~1.0.0",
@@ -69,7 +69,7 @@
     "rc-tree": "~1.3.6",
     "rc-tree-select": "~1.8.0",
     "rc-upload": "~2.1.0",
-    "rc-util": "^3.3.0",
+    "rc-util": "^4.0.0",
     "react-addons-pure-render-mixin": "^15.0.0",
     "react-slick": "~0.14.2",
     "shallowequal": "^0.2.2",