diff --git a/components/date-picker/wrapPicker.tsx b/components/date-picker/wrapPicker.tsx
index ed010293a0e413112253e3e41d1a5f0c7a9e1ef3..2d46210ab2b3e743b916da8c6e6fa415c3079e46 100644
--- a/components/date-picker/wrapPicker.tsx
+++ b/components/date-picker/wrapPicker.tsx
@@ -6,6 +6,20 @@ import warning from '../_util/warning';
 import getLocale from '../_util/getLocale';
 declare const require: Function;
 
+function getColumns({ showHour, showMinute, showSecond }) {
+  let column = 0;
+  if (showHour) {
+    column += 1;
+  }
+  if (showMinute) {
+    column += 1;
+  }
+  if (showSecond) {
+    column += 1;
+  }
+  return column;
+}
+
 export default function wrapPicker(Picker, defaultFormat?) {
   const PickerWrapper = React.createClass({
     getDefaultProps() {
@@ -68,11 +82,13 @@ export default function wrapPicker(Picker, defaultFormat?) {
       const rcTimePickerProps = {
         format: timeFormat,
         showSecond: timeFormat.indexOf('ss') >= 0,
+        showMinute: timeFormat.indexOf('mm') >= 0,
         showHour: timeFormat.indexOf('HH') >= 0,
       };
+      const columns = getColumns(rcTimePickerProps);
       const timePickerCls = classNames({
-        [`${prefixCls}-time-picker-1-column`]: !(rcTimePickerProps.showSecond || rcTimePickerProps.showHour),
-        [`${prefixCls}-time-picker-2-columns`]: rcTimePickerProps.showSecond !== rcTimePickerProps.showHour,
+        [`${prefixCls}-time-picker-1-column`]: columns === 1,
+        [`${prefixCls}-time-picker-2-columns`]: columns === 2,
       });
       const timePicker = props.showTime ? (
         <TimePickerPanel
diff --git a/components/time-picker/demo/disable-options.md b/components/time-picker/demo/disable-options.md
index 8dd21c7c8e5e4297860941e009600d6883aecc8a..837d15cab5ea8b2524ec97d791861652565f7808 100644
--- a/components/time-picker/demo/disable-options.md
+++ b/components/time-picker/demo/disable-options.md
@@ -40,11 +40,28 @@ function disabledMinutes(h) {
 
 ReactDOM.render(
   <div>
-    <em>Just Disabled: </em>
-    <TimePicker disabledHours={disabledHours} disabledMinutes={disabledMinutes} /><br />
-    <em>Hide Directly: </em>
-    <TimePicker disabledHours={disabledHours} disabledMinutes={disabledMinutes} hideDisabledOptions />
+    <TimePicker
+      disabledHours={disabledHours}
+      disabledMinutes={disabledMinutes}
+      placeholder="Just Disabled"
+    />
+    <TimePicker
+      disabledHours={disabledHours}
+      disabledMinutes={disabledMinutes}
+      hideDisabledOptions
+      placeholder="Hide Directly"
+    />
   </div>,
   mountNode
 );
 ````
+
+<style>
+#components-time-picker-demo-disable-options .ant-time-picker {
+  width: 120px;
+}
+#components-time-picker-demo-disable-options .ant-time-picker .ant-time-picker-input {
+  width: 120px;
+  margin-right: 8px;
+}
+</style>