4 files changed, 36 insertions, 8 deletions

diff --git a/HISTORY.md b/HISTORY.md
index 2436cb8..e18638c 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -2,6 +2,11 @@
 
 ---
 
+2.4.0 / 2017-05-02
+---------------------------
+
+Add `popupClassName` prop.
+
 2.3.0 / 2017-03-08
 ---------------------------
 
diff --git a/README.md b/README.md
index 1c44e76..a2758b9 100644
--- a/README.md
+++ b/README.md
@@ -59,6 +59,8 @@ API
 | defaultOpenValue        | moment                            | moment() | default open panel value, used to set utcOffset,locale if value/defaultValue absent |
 | value                   | moment                            | null | current value |
 | placeholder             | String                            | '' | time input's placeholder |
+| className               | String                            | '' | time picker className |
+| popupClassName          | String                            | '' | time panel className |
 | showHour                | Boolean                           | true | whether show hour | |
 | showMinute              | Boolean                           | true | whether show minute |
 | showSecond              | Boolean                           | true | whether show second |
diff --git a/package.json b/package.json
index fa956bf..d219fab 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-time-picker",
-  "version": "2.3.5",
+  "version": "2.4.0",
   "description": "React TimePicker",
   "keywords": [
     "react",
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
index 1a3516e..91745c6 100644
--- a/src/TimePicker.jsx
+++ b/src/TimePicker.jsx
@@ -34,6 +34,7 @@ class Picker extends Component {
     showSecond: PropTypes.bool,
     style: PropTypes.object,
     className: PropTypes.string,
+    popupClassName: PropTypes.string,
     disabledHours: PropTypes.func,
     disabledMinutes: PropTypes.func,
     disabledSeconds: PropTypes.func,
@@ -53,6 +54,7 @@ class Picker extends Component {
     defaultOpen: false,
     style: {},
     className: '',
+    popupClassName: '',
     align: {},
     defaultOpenValue: moment(),
     allowEmpty: true,
@@ -183,6 +185,30 @@ class Picker extends Component {
     );
   }
 
+  getPopupClassName() {
+    const { showHour, showMinute, showSecond, use12Hours, prefixCls } = this.props;
+    let popupClassName = this.props.popupClassName;
+    // Keep it for old compatibility
+    if ((!showHour || !showMinute || !showSecond) && !use12Hours) {
+      popupClassName += ` ${prefixCls}-panel-narrow`;
+    }
+    let selectColumnCount = 0;
+    if (showHour) {
+      selectColumnCount += 1;
+    }
+    if (showMinute) {
+      selectColumnCount += 1;
+    }
+    if (showSecond) {
+      selectColumnCount += 1;
+    }
+    if (use12Hours) {
+      selectColumnCount += 1;
+    }
+    popupClassName += ` ${prefixCls}-panel-column-${selectColumnCount}`;
+    return popupClassName;
+  }
+
   setOpen(open) {
     const { onOpen, onClose } = this.props;
     if (this.state.open !== open) {
@@ -204,15 +230,10 @@ class Picker extends Component {
   render() {
     const {
       prefixCls, placeholder, placement, align,
-      disabled, transitionName, style, className, showHour,
-      showMinute, showSecond, getPopupContainer, name, autoComplete,
-      use12Hours,
+      disabled, transitionName, style, className, getPopupContainer, name, autoComplete,
     } = this.props;
     const { open, value } = this.state;
-    let popupClassName;
-    if ((!showHour || !showMinute || !showSecond) && !use12Hours) {
-      popupClassName = `${prefixCls}-panel-narrow`;
-    }
+    const popupClassName = this.getPopupClassName();
     return (
       <Trigger
         prefixCls={`${prefixCls}-panel`}