Merge pull request #10 from react-component/1.0.0-alpha7

1.0.0 alpha7

16 files changed, 498 insertions, 74 deletions

diff --git a/HISTORY.md b/HISTORY.md
index ebc3b9e..48c386a 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -2,16 +2,22 @@
 
 ---
 
+1.0.0-alpha7 / 2015-12-12
+------------------
+
+`new` add options `disabledHours`, `disabledMinutes`, `disabledSeconds` and `hideDisabledOptions`.
+`remove` remove options `hourOptions`, `minuteOptions` and `secondOptions`.
+
 1.0.0-alpha2 / 2015-12-03
 ------------------
 
-`fix` IE8 compatible.
+`fixed` IE8 compatible.
 `new` add test users.
 
 0.7.1 / 2015-11-20
 ------------------
 
-`fix` change value to null when clear input content to remove the react warning.
+`fixed` change value to null when clear input content to remove the react warning.
 
 0.7.0 / 2015-11-20
 ------------------
@@ -21,7 +27,7 @@
 0.5.6 / 2015-11-19
 ------------------
 
-`fix` use another method to change time and fix the bug about value.getTime().
+`fixed` use another method to change time and fix the bug about value.getTime().
 
 0.5.4 / 2015-11-19
 ------------------
@@ -54,7 +60,7 @@
 0.3.3 / 2015-11-17
 ------------------
 
-`fix` fix some bugs.
+`fixed` fix some bugs.
 
 0.3.0 / 2015-11-17
 ------------------
diff --git a/README.md b/README.md
index 60e5ab0..ea0e034 100644
--- a/README.md
+++ b/README.md
@@ -39,7 +39,6 @@ Usage
 
 ```
 import TimePicker from 'rc-time-picker';
-import React from 'react';
 import ReactDOM from 'react-dom';
 ReactDOM.render(<TimePicker />, container);
 ```
@@ -49,25 +48,26 @@ API
 
 ### TimePicker
 
-| Name           | Type                       | Default                                       | Description                                                                                |
-|----------------|----------------------------|-----------------------------------------------|--------------------------------------------------------------------------------------------|
-| prefixCls      | String                     |                                               | prefixCls of this component                                                                |
-| locale         | Object                     | import from 'rc-time-picker/lib/locale/en_US' |                                                                                            |
-| disabled       | Boolean                    | false                                         | whether picker is disabled                                                                 |
-| open           | Boolean                    | false                                         | current open state of picker. controlled prop                                              |
-| defaultValue   | GregorianCalendar          | null                                          | default initial value                                                                      |
-| value          | GregorianCalendar                 | null                                          | current value                                                                              |
-| gregorianCalendarLocale   | GregorianCalendar  locale object               | null                                          | if value and defaultValue not set, you should set this to your locale                                                                            |
-| placeholder    | String                     | ''                                            | time input's placeholder                                                                   |
-| showHour       | Boolean                    | whether show hour                             |                                                                                            |
-| showSecond     | Boolean                    | whether show second                           |                                                                                            |
-| formatter      | String|GregorianCalendarFormatter |                                        |                                                                                            |
-| hourOptions    | Array<Number>              | hour options                                  |                                                                                            |
-| minuteOptions  | Array<Number>              | minute options                                |                                                                                            |
-| secondOptions  | Array<Number>              | second options                                |                                                                                            |
-| onChange       | Function                   | null                                          | called when select a different value                                                       |
-| placement      | String                     | bottomLeft                                    | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] |
-| transitionName | String                     | ''                                            |                                                                                            |
+| Name                    | Type                              | Default                                       | Description                                                                                |
+|-------------------------|-----------------------------------|-----------------------------------------------|--------------------------------------------------------------------------------------------|
+| prefixCls               | String                            |                                               | prefixCls of this component                                                                |
+| locale                  | Object                            | import from 'rc-time-picker/lib/locale/en_US' |                                                                                            |
+| disabled                | Boolean                           | false                                         | whether picker is disabled                                                                 |
+| open                    | Boolean                           | false                                         | current open state of picker. controlled prop                                              |
+| defaultValue            | GregorianCalendar                 | null                                          | default initial value                                                                      |
+| value                   | GregorianCalendar                 | null                                          | current value                                                                              |
+| gregorianCalendarLocale | GregorianCalendar  locale object  | null                                          | if value and defaultValue not set, you should set this to your locale                      |
+| placeholder             | String                            | ''                                            | time input's placeholder                                                                   |
+| showHour                | Boolean                           | whether show hour                             |                                                                                            |
+| showSecond              | Boolean                           | whether show second                           |                                                                                            |
+| formatter               | String|GregorianCalendarFormatter |                                               |                                                                                            |
+| disabledHours           | Function                          | disabled hour options                         |                                                                                            |
+| disabledMinutes         | Function                          | disabled minute options                       |                                                                                            |
+| disabledSeconds         | Function                          | disabled second options                       |                                                                                            |
+| hideDisabledOptions     | Boolean                           | whether hide disabled options                 |                                                                                            |
+| onChange                | Function                          | null                                          | called when select a different value                                                       |
+| placement               | String                            | bottomLeft                                    | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] |
+| transitionName          | String                            | ''                                            |                                                                                            |
 
 License
 -------
diff --git a/assets/index/Select.less b/assets/index/Select.less
index 3e94c11..13b5b18 100644
--- a/assets/index/Select.less
+++ b/assets/index/Select.less
@@ -48,8 +48,16 @@
     }
   }
 
-  &-option-selected {
+  li&-option-selected {
     background: #edfaff;
     color: #2db7f5;
   }
+
+  li&-option-disabled {
+    color: #bfbfbf;
+    &:hover {
+      background: transparent;
+      cursor: not-allowed;
+    }
+  }
 }
diff --git a/examples/disabled.html b/examples/disabled.html
new file mode 100644
index 0000000..48cdce8
--- /dev/null
+++ b/examples/disabled.html
@@ -0,0 +1 @@
+placeholder
diff --git a/examples/disabled.js b/examples/disabled.js
new file mode 100644
index 0000000..633b8db
--- /dev/null
+++ b/examples/disabled.js
@@ -0,0 +1,66 @@
+/* eslint no-console:0 */
+
+import 'rc-time-picker/assets/index.less';
+
+import React from 'react';
+import ReactDom from 'react-dom';
+
+import GregorianCalendar from 'gregorian-calendar';
+import DateTimeFormat from 'gregorian-calendar-format';
+import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
+
+import TimePicker from 'rc-time-picker';
+import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN';
+
+const showSecond = true;
+const str = showSecond ? 'HH:mm:ss' : 'HH:mm';
+
+const formatter = new DateTimeFormat(str);
+
+const now = new GregorianCalendar(zhCn);
+now.setTime(Date.now());
+
+function generateOptions(length, excludedOptions) {
+  const arr = [];
+  for (let value = 0; value < length; value++) {
+    if (excludedOptions.indexOf(value) < 0) {
+      arr.push(value);
+    }
+  }
+  return arr;
+}
+
+function onChange(value) {
+  console.log(value && formatter.format(value));
+}
+
+function disabledHours() {
+  return [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23];
+}
+
+function disabledMinutes(h) {
+  switch (h) {
+  case 9:
+    return generateOptions(60, [30]);
+  case 21:
+    return generateOptions(60, [0]);
+  default:
+    return generateOptions(60, [0, 30]);
+  }
+}
+
+function disabledSeconds(h, m) {
+  return [h + m % 60];
+}
+
+ReactDom.render(
+  <TimePicker formatter={formatter} locale={TimePickerLocale}
+              showSecond={showSecond}
+              defaultValue={now}
+              className="xxx"
+              onChange={onChange}
+              disabledHours={disabledHours}
+              disabledMinutes={disabledMinutes}
+              disabledSeconds={disabledSeconds} />,
+  document.getElementById('__react-content')
+);
diff --git a/examples/hidden.html b/examples/hidden.html
new file mode 100644
index 0000000..48cdce8
--- /dev/null
+++ b/examples/hidden.html
@@ -0,0 +1 @@
+placeholder
diff --git a/examples/hidden.js b/examples/hidden.js
new file mode 100644
index 0000000..da366cc
--- /dev/null
+++ b/examples/hidden.js
@@ -0,0 +1,37 @@
+/* eslint no-console:0 */
+
+import 'rc-time-picker/assets/index.less';
+
+import React from 'react';
+import ReactDom from 'react-dom';
+
+import GregorianCalendar from 'gregorian-calendar';
+import DateTimeFormat from 'gregorian-calendar-format';
+import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
+
+import TimePicker from 'rc-time-picker';
+import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN';
+
+const showSecond = true;
+const str = showSecond ? 'HH:mm:ss' : 'HH:mm';
+
+const formatter = new DateTimeFormat(str);
+
+const now = new GregorianCalendar(zhCn);
+now.setTime(Date.now());
+
+function onChange(value) {
+  console.log(value && formatter.format(value));
+}
+
+ReactDom.render(
+  <TimePicker formatter={formatter} locale={TimePickerLocale}
+              showSecond={showSecond}
+              defaultValue={now}
+              className="xxx"
+              onChange={onChange}
+              disabledHours={() => [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]}
+              disabledMinutes={() => [0, 2, 4, 6, 8]}
+              hideDisabledOptions />,
+  document.getElementById('__react-content')
+);
diff --git a/examples/pick-time.js b/examples/pick-time.js
index dd5a2ce..f66e416 100644
--- a/examples/pick-time.js
+++ b/examples/pick-time.js
@@ -29,6 +29,6 @@ ReactDom.render(
               showSecond={showSecond}
               defaultValue={now}
               className="xxx"
-              onChange={onChange}/>,
+              onChange={onChange} />,
   document.getElementById('__react-content')
 );
diff --git a/package.json b/package.json
index fa91d86..8bc0ae2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-time-picker",
-  "version": "1.0.0-alpha6",
+  "version": "1.0.0-alpha7",
   "description": "React TimePicker",
   "keywords": [
     "react",
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
index 3e331f1..ad4e834 100644
--- a/src/TimePicker.jsx
+++ b/src/TimePicker.jsx
@@ -34,9 +34,10 @@ const Picker = React.createClass({
     style: PropTypes.object,
     className: PropTypes.string,
     showSecond: PropTypes.bool,
-    hourOptions: PropTypes.array,
-    minuteOptions: PropTypes.array,
-    secondOptions: PropTypes.array,
+    disabledHours: PropTypes.func,
+    disabledMinutes: PropTypes.func,
+    disabledSeconds: PropTypes.func,
+    hideDisabledOptions: PropTypes.bool,
     onChange: PropTypes.func,
     onOpen: PropTypes.func,
     onClose: PropTypes.func,
@@ -54,6 +55,10 @@ const Picker = React.createClass({
       allowEmpty: true,
       showHour: true,
       showSecond: true,
+      disabledHours: noop,
+      disabledMinutes: noop,
+      disabledSeconds: noop,
+      hideDisabledOptions: false,
       placement: 'bottomLeft',
       onChange: noop,
       onOpen: noop,
@@ -145,7 +150,7 @@ const Picker = React.createClass({
   },
 
   getPanelElement() {
-    const { prefixCls, defaultValue, locale, placeholder, hourOptions, minuteOptions, secondOptions, allowEmpty, showHour, showSecond, gregorianCalendarLocale, value } = this.props;
+    const { prefixCls, defaultValue, locale, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, gregorianCalendarLocale, value } = this.props;
     let calendarLocale;
     if (value) {
       calendarLocale = value.locale;
@@ -170,9 +175,10 @@ const Picker = React.createClass({
         allowEmpty={allowEmpty}
         formatter={this.getFormatter()}
         placeholder={placeholder}
-        hourOptions={hourOptions}
-        minuteOptions={minuteOptions}
-        secondOptions={secondOptions}
+        disabledHours={disabledHours}
+        disabledMinutes={disabledMinutes}
+        disabledSeconds={disabledSeconds}
+        hideDisabledOptions={hideDisabledOptions}
       />
     );
   },
diff --git a/src/module/Combobox.jsx b/src/module/Combobox.jsx
index a017ec9..7374b39 100644
--- a/src/module/Combobox.jsx
+++ b/src/module/Combobox.jsx
@@ -2,11 +2,21 @@ import React, {PropTypes} from 'react';
 import Select from './Select';
 import GregorianCalendar from 'gregorian-calendar';
 
-const formatOption = (option) => {
+const formatOption = (option, disabledOptions) => {
+  let value = `${option}`;
   if (option < 10) {
-    return `0${option}`;
+    value = `0${option}`;
   }
-  return `${option}`;
+
+  let disabled = false;
+  if (disabledOptions && disabledOptions.indexOf(option) >= 0) {
+    disabled = true;
+  }
+
+  return {
+    value,
+    disabled,
+  };
 };
 
 const Combobox = React.createClass({
@@ -21,6 +31,9 @@ const Combobox = React.createClass({
     hourOptions: PropTypes.array,
     minuteOptions: PropTypes.array,
     secondOptions: PropTypes.array,
+    disabledHours: PropTypes.func,
+    disabledMinutes: PropTypes.func,
+    disabledSeconds: PropTypes.func,
     onCurrentSelectPanelChange: PropTypes.func,
   },
 
@@ -47,14 +60,16 @@ const Combobox = React.createClass({
   },
 
   getHourSelect(hour) {
-    const { prefixCls, hourOptions, showHour } = this.props;
+    const { prefixCls, hourOptions, disabledHours, showHour } = this.props;
     if (!showHour) {
       return null;
     }
+    const disabledOptions = disabledHours();
+
     return (
       <Select
         prefixCls={prefixCls}
-        options={hourOptions.map(option => formatOption(option))}
+        options={hourOptions.map(option => formatOption(option, disabledOptions))}
         selectedIndex={hourOptions.indexOf(hour)}
         type="hour"
         onSelect={this.onItemChange}
@@ -64,11 +79,13 @@ const Combobox = React.createClass({
   },
 
   getMinuteSelect(minute) {
-    const { prefixCls, minuteOptions } = this.props;
+    const { prefixCls, minuteOptions, disabledMinutes, value } = this.props;
+    const disabledOptions = disabledMinutes(value.getHourOfDay());
+
     return (
       <Select
         prefixCls={prefixCls}
-        options={minuteOptions.map(option => formatOption(option))}
+        options={minuteOptions.map(option => formatOption(option, disabledOptions))}
         selectedIndex={minuteOptions.indexOf(minute)}
         type="minute"
         onSelect={this.onItemChange}
@@ -78,14 +95,16 @@ const Combobox = React.createClass({
   },
 
   getSecondSelect(second) {
-    const { prefixCls, secondOptions, showSecond } = this.props;
+    const { prefixCls, secondOptions, disabledSeconds, showSecond, value } = this.props;
     if (!showSecond) {
       return null;
     }
+    const disabledOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes());
+
     return (
       <Select
         prefixCls={prefixCls}
-        options={secondOptions.map(option => formatOption(option))}
+        options={secondOptions.map(option => formatOption(option, disabledOptions))}
         selectedIndex={secondOptions.indexOf(second)}
         type="second"
         onSelect={this.onItemChange}
diff --git a/src/module/Header.jsx b/src/module/Header.jsx
index ef88948..9a048dc 100644
--- a/src/module/Header.jsx
+++ b/src/module/Header.jsx
@@ -13,6 +13,9 @@ const Header = React.createClass({
     hourOptions: PropTypes.array,
     minuteOptions: PropTypes.array,
     secondOptions: PropTypes.array,
+    disabledHours: PropTypes.func,
+    disabledMinutes: PropTypes.func,
+    disabledSeconds: PropTypes.func,
     onChange: PropTypes.func,
     onClear: PropTypes.func,
     onEsc: PropTypes.func,
@@ -54,7 +57,7 @@ const Header = React.createClass({
       str,
     });
     let value = null;
-    const {formatter, gregorianCalendarLocale, hourOptions, minuteOptions, secondOptions, onChange, allowEmpty} = this.props;
+    const {formatter, gregorianCalendarLocale, hourOptions, minuteOptions, secondOptions, disabledHours, disabledMinutes, disabledSeconds, onChange, allowEmpty} = this.props;
 
     if (str) {
       const originalValue = this.props.value;
@@ -71,6 +74,7 @@ const Header = React.createClass({
       }
 
       if (value) {
+        // if time value not allowed, response warning.
         if (
           hourOptions.indexOf(value.getHourOfDay()) < 0 ||
           minuteOptions.indexOf(value.getMinutes()) < 0 ||
@@ -82,6 +86,21 @@ const Header = React.createClass({
           return;
         }
 
+        // if time value is disabled, response warning.
+        const disabledHourOptions = disabledHours();
+        const disabledMinuteOptions = disabledMinutes(value.getHourOfDay());
+        const disabledSecondOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes());
+        if (
+          (disabledHourOptions && disabledHourOptions.indexOf(value.getHourOfDay()) >= 0) ||
+          (disabledMinuteOptions && disabledMinuteOptions.indexOf(value.getMinutes()) >= 0) ||
+          (disabledSecondOptions && disabledSecondOptions.indexOf(value.getSeconds()) >= 0)
+        ) {
+          this.setState({
+            invalid: true,
+          });
+          return;
+        }
+
         if (originalValue && value) {
           if (
             originalValue.getHourOfDay() !== value.getHourOfDay() ||
diff --git a/src/module/Panel.jsx b/src/module/Panel.jsx
index 63823ee..94d3842 100644
--- a/src/module/Panel.jsx
+++ b/src/module/Panel.jsx
@@ -6,10 +6,12 @@ import Combobox from './Combobox';
 function noop() {
 }
 
-function generateOptions(length) {
+function generateOptions(length, disabledOptions, hideDisabledOptions) {
   const arr = [];
-  for (let i = 0; i < length; i++) {
-    arr.push(i);
+  for (let value = 0; value < length; value++) {
+    if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) {
+      arr.push(value);
+    }
   }
   return arr;
 }
@@ -22,9 +24,10 @@ const Panel = React.createClass({
     placeholder: PropTypes.string,
     gregorianCalendarLocale: PropTypes.object,
     formatter: PropTypes.object,
-    hourOptions: PropTypes.array,
-    minuteOptions: PropTypes.array,
-    secondOptions: PropTypes.array,
+    disabledHours: PropTypes.func,
+    disabledMinutes: PropTypes.func,
+    disabledSeconds: PropTypes.func,
+    hideDisabledOptions: PropTypes.bool,
     onChange: PropTypes.func,
     onEsc: PropTypes.func,
     allowEmpty: PropTypes.bool,
@@ -37,9 +40,6 @@ const Panel = React.createClass({
 
   getDefaultProps() {
     return {
-      hourOptions: generateOptions(24),
-      minuteOptions: generateOptions(60),
-      secondOptions: generateOptions(60),
       onChange: noop,
       onClear: noop,
     };
@@ -75,8 +75,15 @@ const Panel = React.createClass({
   },
 
   render() {
-    const { locale, prefixCls, placeholder, hourOptions, minuteOptions, secondOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props;
+    const { locale, prefixCls, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props;
     const value = this.state.value;
+    const disabledHourOptions = disabledHours();
+    const disabledMinuteOptions = disabledMinutes(value.getHourOfDay());
+    const disabledSecondOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes());
+    const hourOptions = generateOptions(24, disabledHourOptions, hideDisabledOptions);
+    const minuteOptions = generateOptions(60, disabledMinuteOptions, hideDisabledOptions);
+    const secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions);
+
     return (
       <div className={`${prefixCls}-inner`}>
         <Header
@@ -91,6 +98,9 @@ const Panel = React.createClass({
           hourOptions={hourOptions}
           minuteOptions={minuteOptions}
           secondOptions={secondOptions}
+          disabledHours={disabledHours}
+          disabledMinutes={disabledMinutes}
+          disabledSeconds={disabledSeconds}
           onChange={this.onChange}
           onClear={this.onClear}
           allowEmpty={allowEmpty}
@@ -106,6 +116,9 @@ const Panel = React.createClass({
           hourOptions={hourOptions}
           minuteOptions={minuteOptions}
           secondOptions={secondOptions}
+          disabledHours={disabledHours}
+          disabledMinutes={disabledMinutes}
+          disabledSeconds={disabledSeconds}
           onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
         />
       </div>
diff --git a/src/module/Select.jsx b/src/module/Select.jsx
index 3659692..ab10789 100644
--- a/src/module/Select.jsx
+++ b/src/module/Select.jsx
@@ -51,11 +51,15 @@ const Select = React.createClass({
   getOptions() {
     const { options, selectedIndex, prefixCls } = this.props;
     return options.map((item, index) => {
-      const selected = selectedIndex === index;
       const cls = classnames({
-        [`${prefixCls}-select-option-selected`]: selected,
+        [`${prefixCls}-select-option-selected`]: selectedIndex === index,
+        [`${prefixCls}-select-option-disabled`]: item.disabled,
       });
-      return <li className={cls} key={index} onClick={this.onSelect.bind(this, +item)}>{item}</li>;
+      let onclick = null;
+      if (!item.disabled) {
+        onclick = this.onSelect.bind(this, +item.value);
+      }
+      return <li className={cls} key={index} onClick={onclick} disabled={item.disabled}>{item.value}</li>;
     });
   },
 
diff --git a/tests/Header.spec.jsx b/tests/Header.spec.jsx
index cc8f954..e992279 100644
--- a/tests/Header.spec.jsx
+++ b/tests/Header.spec.jsx
@@ -121,6 +121,131 @@ describe('Header', () => {
       });
     });
 
+    it('carry disabled correctly', (done) => {
+      const picker = renderPicker({
+        disabledMinutes(h) {
+          return [h];
+        },
+        disabledSeconds(h, m) {
+          return [h + m % 60];
+        },
+      });
+      expect(picker.state.open).not.to.be.ok();
+      const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
+      let header;
+      async.series([(next) => {
+        Simulate.click(input);
+        setTimeout(next, 100);
+      }, (next) => {
+        expect(picker.state.open).to.be(true);
+        header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
+        expect(header).to.be.ok();
+        expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
+        expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
+
+        ReactDOM.findDOMNode(header).value = '10:09:78';
+        Simulate.change(header);
+        setTimeout(next, 100);
+      }, (next) => {
+        expect(picker.state.open).to.be(true);
+        expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
+        expect(ReactDOM.findDOMNode(header).value).to.be('10:09:78');
+        expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
+
+        ReactDOM.findDOMNode(header).value = '10:10:78';
+        Simulate.change(header);
+        setTimeout(next, 100);
+      }, (next) => {
+        expect(picker.state.open).to.be(true);
+        expect(ReactDOM.findDOMNode(header).value).to.be('10:11:18');
+        expect(ReactDOM.findDOMNode(input).value).to.be('10:11:18');
+
+        ReactDOM.findDOMNode(header).value = '10:09:19';
+        Simulate.change(header);
+        setTimeout(next, 100);
+      }, (next) => {
+        expect(picker.state.open).to.be(true);
+        expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
+        expect(ReactDOM.findDOMNode(header).value).to.be('10:09:19');
+        expect(ReactDOM.findDOMNode(input).value).to.be('10:11:18');
+
+        ReactDOM.findDOMNode(header).value = '10:09:20';
+        Simulate.change(header);
+        setTimeout(next, 100);
+      }, (next) => {
+        expect(picker.state.open).to.be(true);
+        expect(ReactDOM.findDOMNode(header).value).to.be('10:09:20');
+        expect(ReactDOM.findDOMNode(input).value).to.be('10:09:20');
+
+        next();
+      }], () => {
+        done();
+      });
+    });
+
+    it('carry hidden correctly', (done) => {
+      const picker = renderPicker({
+        disabledMinutes(h) {
+          return [h];
+        },
+        disabledSeconds(h, m) {
+          return [h + m % 60];
+        },
+        hideDisabledOptions: true,
+      });
+      expect(picker.state.open).not.to.be.ok();
+      const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
+      let header;
+      async.series([(next) => {
+        Simulate.click(input);
+        setTimeout(next, 100);
+      }, (next) => {
+        expect(picker.state.open).to.be(true);
+        header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
+        expect(header).to.be.ok();
+        expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
+        expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
+
+        ReactDOM.findDOMNode(header).value = '10:09:78';
+        Simulate.change(header);
+        setTimeout(next, 100);
+      }, (next) => {
+        expect(picker.state.open).to.be(true);
+        expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
+        expect(ReactDOM.findDOMNode(header).value).to.be('10:09:78');
+        expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
+
+        ReactDOM.findDOMNode(header).value = '10:10:78';
+        Simulate.change(header);
+        setTimeout(next, 100);
+      }, (next) => {
+        expect(picker.state.open).to.be(true);
+        expect(ReactDOM.findDOMNode(header).value).to.be('10:11:18');
+        expect(ReactDOM.findDOMNode(input).value).to.be('10:11:18');
+
+        ReactDOM.findDOMNode(header).value = '10:09:19';
+        Simulate.change(header);
+        setTimeout(next, 100);
+      }, (next) => {
+        expect(picker.state.open).to.be(true);
+        expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
+        expect(ReactDOM.findDOMNode(header).value).to.be('10:09:19');
+        expect(ReactDOM.findDOMNode(input).value).to.be('10:11:18');
+
+        ReactDOM.findDOMNode(header).value = '10:09:20';
+        Simulate.change(header);
+        setTimeout(next, 100);
+      }, (next) => {
+        expect(picker.state.open).to.be(true);
+        expect(ReactDOM.findDOMNode(header).value).to.be('10:09:20');
+        expect(ReactDOM.findDOMNode(input).value).to.be('10:09:20');
+
+        next();
+      }], () => {
+        done();
+      });
+    });
+
     it('check correctly', (done) => {
       const picker = renderPicker();
       expect(picker.state.open).not.to.be.ok();
diff --git a/tests/Select.spec.jsx b/tests/Select.spec.jsx
index 7e53c31..f7717c7 100644
--- a/tests/Select.spec.jsx
+++ b/tests/Select.spec.jsx
@@ -29,7 +29,7 @@ describe('Select', () => {
         formatter={formatter}
         locale={TimePickerLocale}
         showSecond={showSecond}
-        defaultValue={formatTime('01:02:03', formatter)}
+        defaultValue={formatTime('01:02:04', formatter)}
         {...props}
       />, container);
   }
@@ -89,19 +89,19 @@ describe('Select', () => {
       }, (next) => {
         expect(picker.state.open).to.be(true);
         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
-        const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0];
-        const option = selector.getElementsByTagName('li')[19];
         expect(header).to.be.ok();
-        expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
-        expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
+        expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04');
+        expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04');
 
+        const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0];
+        const option = selector.getElementsByTagName('li')[19];
         Simulate.click(option);
         setTimeout(next, 100);
       }, (next) => {
         expect(change).to.be.ok();
         expect(change.getHourOfDay()).to.be(19);
-        expect(ReactDOM.findDOMNode(header).value).to.be('19:02:03');
-        expect(ReactDOM.findDOMNode(input).value).to.be('19:02:03');
+        expect(ReactDOM.findDOMNode(header).value).to.be('19:02:04');
+        expect(ReactDOM.findDOMNode(input).value).to.be('19:02:04');
         expect(picker.state.open).to.be.ok();
 
         next();
@@ -128,19 +128,19 @@ describe('Select', () => {
       }, (next) => {
         expect(picker.state.open).to.be(true);
         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
-        const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1];
-        const option = selector.getElementsByTagName('li')[19];
         expect(header).to.be.ok();
-        expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
-        expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
+        expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04');
+        expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04');
 
+        const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1];
+        const option = selector.getElementsByTagName('li')[19];
         Simulate.click(option);
         setTimeout(next, 100);
       }, (next) => {
         expect(change).to.be.ok();
         expect(change.getMinutes()).to.be(19);
-        expect(ReactDOM.findDOMNode(header).value).to.be('01:19:03');
-        expect(ReactDOM.findDOMNode(input).value).to.be('01:19:03');
+        expect(ReactDOM.findDOMNode(header).value).to.be('01:19:04');
+        expect(ReactDOM.findDOMNode(input).value).to.be('01:19:04');
         expect(picker.state.open).to.be.ok();
 
         next();
@@ -167,12 +167,12 @@ describe('Select', () => {
       }, (next) => {
         expect(picker.state.open).to.be(true);
         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
-        const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[2];
-        const option = selector.getElementsByTagName('li')[19];
         expect(header).to.be.ok();
-        expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
-        expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
+        expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04');
+        expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04');
 
+        const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[2];
+        const option = selector.getElementsByTagName('li')[19];
         Simulate.click(option);
         setTimeout(next, 100);
       }, (next) => {
@@ -187,5 +187,124 @@ describe('Select', () => {
         done();
       });
     });
+
+    it('disabled correctly', (done) => {
+      let change;
+      const picker = renderPicker({
+        onChange(v) {
+          change = v;
+        },
+        disabledMinutes(h) {
+          return [h];
+        },
+        disabledSeconds(h, m) {
+          return [h + m % 60];
+        },
+      });
+      expect(picker.state.open).not.to.be.ok();
+      const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
+      let header;
+      async.series([(next) => {
+        expect(picker.state.open).to.be(false);
+
+        Simulate.click(input);
+        setTimeout(next, 100);
+      }, (next) => {
+        expect(picker.state.open).to.be(true);
+        header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
+        expect(header).to.be.ok();
+        expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04');
+        expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04');
+
+        const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1];
+        const option = selector.getElementsByTagName('li')[1];
+        Simulate.click(option);
+        setTimeout(next, 100);
+      }, (next) => {
+        expect(change).not.to.be.ok();
+        expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04');
+        expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04');
+        expect(picker.state.open).to.be.ok();
+
+        const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[2];
+        const option = selector.getElementsByTagName('li')[3];
+        Simulate.click(option);
+        setTimeout(next, 100);
+      }, (next) => {
+        expect(change).not.to.be.ok();
+        expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04');
+        expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04');
+        expect(picker.state.open).to.be.ok();
+
+        const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1];
+        const option = selector.getElementsByTagName('li')[7];
+        Simulate.click(option);
+        setTimeout(next, 100);
+      }, (next) => {
+        expect(change).to.be.ok();
+        expect(change.getMinutes()).to.be(7);
+        expect(ReactDOM.findDOMNode(header).value).to.be('01:07:04');
+        expect(ReactDOM.findDOMNode(input).value).to.be('01:07:04');
+        expect(picker.state.open).to.be.ok();
+
+        next();
+      }], () => {
+        done();
+      });
+    });
+
+    it('hidden correctly', (done) => {
+      let change;
+      const picker = renderPicker({
+        onChange(v) {
+          change = v;
+        },
+        disabledHours() {
+          return [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23];
+        },
+        hideDisabledOptions: true,
+      });
+      expect(picker.state.open).not.to.be.ok();
+      const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
+      let header;
+      async.series([(next) => {
+        expect(picker.state.open).to.be(false);
+
+        Simulate.click(input);
+        setTimeout(next, 100);
+      }, (next) => {
+        expect(picker.state.open).to.be(true);
+        header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
+        expect(header).to.be.ok();
+        expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04');
+        expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04');
+
+        const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0];
+        const option = selector.getElementsByTagName('li')[3];
+        Simulate.click(option);
+        setTimeout(next, 100);
+      }, (next) => {
+        expect(change).to.be.ok();
+        expect(change.getHourOfDay()).to.be(6);
+        expect(ReactDOM.findDOMNode(header).value).to.be('06:02:04');
+        expect(ReactDOM.findDOMNode(input).value).to.be('06:02:04');
+        expect(picker.state.open).to.be.ok();
+
+        const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0];
+        const option = selector.getElementsByTagName('li')[4];
+        Simulate.click(option);
+        setTimeout(next, 100);
+      }, (next) => {
+        expect(change).to.be.ok();
+        expect(change.getHourOfDay()).to.be(8);
+        expect(ReactDOM.findDOMNode(header).value).to.be('08:02:04');
+        expect(ReactDOM.findDOMNode(input).value).to.be('08:02:04');
+        expect(picker.state.open).to.be.ok();
+
+        next();
+      }], () => {
+        done();
+      });
+    });
   });
 });