Updated 12 hours example, added default format for 12 hours mode, updated tests

4 files changed, 96 insertions, 21 deletions

diff --git a/examples/12hours.js b/examples/12hours.js
index 18fb626..44e514a 100644
--- a/examples/12hours.js
+++ b/examples/12hours.js
@@ -12,7 +12,7 @@ import TimePicker from 'rc-time-picker';
 const showSecond = false;
 const str = showSecond ? 'HH:mm:ss' : 'HH:mm';
 
-const now = moment().hour(14).minute(30);
+const now = moment().hour(0).minute(0);
 
 function onChange(value) {
   console.log(value && value.format(str));
@@ -24,7 +24,7 @@ ReactDom.render(
     defaultValue={now}
     className="xxx"
     onChange={onChange}
-    show12Hours
+    use12Hours
   />,
   document.getElementById('__react-content')
 );
diff --git a/src/Combobox.jsx b/src/Combobox.jsx
index 339764c..d2c934c 100644
--- a/src/Combobox.jsx
+++ b/src/Combobox.jsx
@@ -44,10 +44,10 @@ const Combobox = React.createClass({
 
     if (type === 'hour') {
       if (use12Hours) {
-        if (value.hour() > 12 || !value.hour()) {
-          value.hour(+itemValue + 12);
+        if (this.isAM()) {
+          value.hour(+itemValue % 12);
         } else {
-          value.hour(+itemValue);
+          value.hour((+itemValue % 12) + 12);
         }
       } else {
         value.hour(+itemValue);
@@ -85,22 +85,14 @@ const Combobox = React.createClass({
       return null;
     }
     const disabledOptions = disabledHours();
-    let hourAdj;
-    if (use12Hours) {
-      if (hour > 12) {
-        hourAdj = hour - 12;
-      } else {
-        hourAdj = hour || 12;
-      }
-    } else {
-      hourAdj = hour;
-    }
-
     let hourOptionsAdj;
+    let hourAdj;
     if (use12Hours) {
-      hourOptionsAdj = hourOptions.filter(h => h <= 12 && h > 0);
+      hourOptionsAdj = [12].concat(hourOptions.filter(h => h < 12 && h > 0));
+      hourAdj = (hour % 12) || 12;
     } else {
       hourOptionsAdj = hourOptions;
+      hourAdj = hour;
     }
 
     return (
@@ -156,13 +148,12 @@ const Combobox = React.createClass({
   },
 
   getAMPMSelect() {
-    const { prefixCls, use12Hours, defaultOpenValue } = this.props;
+    const { prefixCls, use12Hours } = this.props;
     if (!use12Hours) {
       return null;
     }
-    const value = this.props.value || defaultOpenValue;
     const AMPMOptions = [{ value: 'AM' }, { value: 'PM' }];
-    const selected = (!value.hour() || value.hour() > 12) ? 1 : 0;
+    const selected = this.isAM() ? 0 : 1;
 
     return (
       <Select
@@ -176,6 +167,11 @@ const Combobox = React.createClass({
     );
   },
 
+  isAM() {
+    const { value } = this.props;
+    return value.hour() >= 0 && value.hour() < 12;
+  },
+
   render() {
     const { prefixCls, defaultOpenValue } = this.props;
     const value = this.props.value || defaultOpenValue;
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
index 6b76223..7065333 100644
--- a/src/TimePicker.jsx
+++ b/src/TimePicker.jsx
@@ -128,10 +128,21 @@ const Picker = React.createClass({
   },
 
   getFormat() {
-    const { format, showHour, showMinute, showSecond } = this.props;
+    const { format, showHour, showMinute, showSecond, use12Hours } = this.props;
     if (format) {
       return format;
     }
+
+    if (use12Hours) {
+      const fmtString = ([
+        showHour ? 'h' : '',
+        showMinute ? 'mm' : '',
+        showSecond ? 'ss' : '',
+      ].filter(item => !!item).join(':'));
+
+      return fmtString.concat(' a');
+    }
+
     return [
       showHour ? 'HH' : '',
       showMinute ? 'mm' : '',
diff --git a/tests/Select.spec.jsx b/tests/Select.spec.jsx
index e6d32dd..ef9ca32 100644
--- a/tests/Select.spec.jsx
+++ b/tests/Select.spec.jsx
@@ -315,4 +315,72 @@ describe('Select', () => {
       });
     });
   });
+
+
+  describe('select in 12 hours mode', () => {
+    it('renders correctly', (done) => {
+      const picker = renderPicker({
+        use12Hours: true,
+        defaultValue: moment().hour(14).minute(0).second(0),
+        showSecond: false,
+        format: undefined,
+      });
+      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');
+        expect((input).value).to.be('2:00 pm');
+
+        setTimeout(next, 100);
+      }, (next) => {
+        expect(selector.length).to.be(3);
+
+        next();
+      }], () => {
+        done();
+      });
+    });
+
+
+    it('renders 12am correctly', (done) => {
+      const picker = renderPicker({
+        use12Hours: true,
+        defaultValue: moment().hour(0).minute(0).second(0),
+        showSecond: false,
+        format: undefined,
+      });
+      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');
+        expect((input).value).to.be('12:00 am');
+
+        setTimeout(next, 100);
+      }, (next) => {
+        expect(selector.length).to.be(3);
+
+        next();
+      }], () => {
+        done();
+      });
+    });
+  });
 });