Add onAmpmChange prop

README.md

@@ -72,6 +72,7 @@ API
 | use12Hours              | Boolean                           | false | 12 hours display mode |
 | hideDisabledOptions     | Boolean                           | false | whether hide disabled options |
 | onChange                | Function                          | null | called when select a different value |
+| onAmPmChange            | Function                          | null | called when select an am/pm value |
 | addon                   | Function                          | - | called from timepicker panel to render some addon to its bottom, like an OK button. Receives panel instance as parameter, to be able to close it like `panel.close()`.|
 | placement               | String                            | bottomLeft | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] |
 | transitionName          | String                            | ''  |  |

src/Combobox.jsx

@@ -26,6 +26,7 @@ class Combobox extends Component {
     prefixCls: PropTypes.string,
     value: PropTypes.object,
     onChange: PropTypes.func,
+    onAmPmChange: PropTypes.func,
     showHour: PropTypes.bool,
     showMinute: PropTypes.bool,
     showSecond: PropTypes.bool,
@@ -69,6 +70,7 @@ class Combobox extends Component {
           }
         }
       }
+      this.props.onAmPmChange(ampm);
     } else {
       value.second(+itemValue);
     }

src/Panel.jsx

@@ -33,6 +33,7 @@ class Panel extends Component {
     disabledSeconds: PropTypes.func,
     hideDisabledOptions: PropTypes.bool,
     onChange: PropTypes.func,
+    onAmPmChange: PropTypes.func,
     onEsc: PropTypes.func,
     allowEmpty: PropTypes.bool,
     showHour: PropTypes.bool,
@@ -84,6 +85,10 @@ class Panel extends Component {
     this.props.onChange(newValue);
   }
 
+  onAmPmChange = (ampm) => {
+    this.props.onAmPmChange(ampm);
+  }
+
   onCurrentSelectPanelChange = (currentSelectPanel) => {
     this.setState({ currentSelectPanel });
   }
@@ -165,6 +170,7 @@ class Panel extends Component {
           defaultOpenValue={defaultOpenValue}
           format={format}
           onChange={this.onChange}
+          onAmPmChange={this.onAmPmChange}
           showHour={showHour}
           showMinute={showMinute}
           showSecond={showSecond}

src/TimePicker.jsx

@@ -41,6 +41,7 @@ export default class Picker extends Component {
     disabledSeconds: PropTypes.func,
     hideDisabledOptions: PropTypes.bool,
     onChange: PropTypes.func,
+    onAmPmChange: PropTypes.func,
     onOpen: PropTypes.func,
     onClose: PropTypes.func,
     onFocus: PropTypes.func,
@@ -79,6 +80,7 @@ export default class Picker extends Component {
     hideDisabledOptions: false,
     placement: 'bottomLeft',
     onChange: noop,
+    onAmPmChange: noop,
     onOpen: noop,
     onClose: noop,
     onFocus: noop,
@@ -116,6 +118,10 @@ export default class Picker extends Component {
     this.setValue(value);
   }
 
+  onAmPmChange = (ampm) => {
+    this.props.onAmPmChange(ampm);
+  }
+
   onPanelClear = () => {
     this.setValue(null);
     this.setOpen(false);
@@ -183,6 +189,7 @@ export default class Picker extends Component {
         value={this.state.value}
         inputReadOnly={inputReadOnly}
         onChange={this.onPanelChange}
+        onAmPmChange={this.onAmPmChange}
         onClear={this.onPanelClear}
         defaultOpenValue={defaultOpenValue}
         showHour={showHour}

tests/Select.spec.jsx

@@ -250,6 +250,47 @@ describe('Select', () => {
       });
     });
 
+    it('ampm correctly', (done) => {
+      let ampmChange;
+      const picker = renderPicker({
+        onAmPmChange(v) {
+          ampmChange = v;
+        },
+        defaultValue: moment().hour(0).minute(0).second(0),
+        format: undefined,
+        showSecond: false,
+        use12Hours: true,
+      });
+      expect(picker.state.open).not.to.be.ok();
+      const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
+        'rc-time-picker-input')[0];
+      let selector;
+      async.series([(next) => {
+        expect(picker.state.open).to.be(false);
+
+        Simulate.click(input);
+        setTimeout(next, 100);
+      }, (next) => {
+        expect(picker.state.open).to.be(true);
+
+        selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
+          'rc-time-picker-panel-select')[2];
+        expect((input).value).to.be('12:00 am');
+        const option = selector.getElementsByTagName('li')[1];
+        Simulate.click(option);
+        setTimeout(next, 100);
+      }, (next) => {
+        expect(ampmChange).to.be.ok();
+        expect(ampmChange).to.be('PM');
+        expect((input).value).to.be('12:00 pm');
+        expect(picker.state.open).to.be.ok();
+
+        next();
+      }], () => {
+        done();
+      });
+    });
+
     it('disabled correctly', (done) => {
       let change;
       const picker = renderPicker({