aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--examples/12hours.js4
-rw-r--r--src/Combobox.jsx32
-rw-r--r--src/TimePicker.jsx13
-rw-r--r--tests/Select.spec.jsx68
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';
12const showSecond = false; 12const showSecond = false;
13const str = showSecond ? 'HH:mm:ss' : 'HH:mm'; 13const str = showSecond ? 'HH:mm:ss' : 'HH:mm';
14 14
15const now = moment().hour(14).minute(30); 15const now = moment().hour(0).minute(0);
16 16
17function onChange(value) { 17function onChange(value) {
18 console.log(value && value.format(str)); 18 console.log(value && value.format(str));
@@ -24,7 +24,7 @@ ReactDom.render(
24 defaultValue={now} 24 defaultValue={now}
25 className="xxx" 25 className="xxx"
26 onChange={onChange} 26 onChange={onChange}
27 show12Hours 27 use12Hours
28 />, 28 />,
29 document.getElementById('__react-content') 29 document.getElementById('__react-content')
30); 30);
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({
44 44
45 if (type === 'hour') { 45 if (type === 'hour') {
46 if (use12Hours) { 46 if (use12Hours) {
47 if (value.hour() > 12 || !value.hour()) { 47 if (this.isAM()) {
48 value.hour(+itemValue + 12); 48 value.hour(+itemValue % 12);
49 } else { 49 } else {
50 value.hour(+itemValue); 50 value.hour((+itemValue % 12) + 12);
51 } 51 }
52 } else { 52 } else {
53 value.hour(+itemValue); 53 value.hour(+itemValue);
@@ -85,22 +85,14 @@ const Combobox = React.createClass({
85 return null; 85 return null;
86 } 86 }
87 const disabledOptions = disabledHours(); 87 const disabledOptions = disabledHours();
88 let hourAdj;
89 if (use12Hours) {
90 if (hour > 12) {
91 hourAdj = hour - 12;
92 } else {
93 hourAdj = hour || 12;
94 }
95 } else {
96 hourAdj = hour;
97 }
98
99 let hourOptionsAdj; 88 let hourOptionsAdj;
89 let hourAdj;
100 if (use12Hours) { 90 if (use12Hours) {
101 hourOptionsAdj = hourOptions.filter(h => h <= 12 && h > 0); 91 hourOptionsAdj = [12].concat(hourOptions.filter(h => h < 12 && h > 0));
92 hourAdj = (hour % 12) || 12;
102 } else { 93 } else {
103 hourOptionsAdj = hourOptions; 94 hourOptionsAdj = hourOptions;
95 hourAdj = hour;
104 } 96 }
105 97
106 return ( 98 return (
@@ -156,13 +148,12 @@ const Combobox = React.createClass({
156 }, 148 },
157 149
158 getAMPMSelect() { 150 getAMPMSelect() {
159 const { prefixCls, use12Hours, defaultOpenValue } = this.props; 151 const { prefixCls, use12Hours } = this.props;
160 if (!use12Hours) { 152 if (!use12Hours) {
161 return null; 153 return null;
162 } 154 }
163 const value = this.props.value || defaultOpenValue;
164 const AMPMOptions = [{ value: 'AM' }, { value: 'PM' }]; 155 const AMPMOptions = [{ value: 'AM' }, { value: 'PM' }];
165 const selected = (!value.hour() || value.hour() > 12) ? 1 : 0; 156 const selected = this.isAM() ? 0 : 1;
166 157
167 return ( 158 return (
168 <Select 159 <Select
@@ -176,6 +167,11 @@ const Combobox = React.createClass({
176 ); 167 );
177 }, 168 },
178 169
170 isAM() {
171 const { value } = this.props;
172 return value.hour() >= 0 && value.hour() < 12;
173 },
174
179 render() { 175 render() {
180 const { prefixCls, defaultOpenValue } = this.props; 176 const { prefixCls, defaultOpenValue } = this.props;
181 const value = this.props.value || defaultOpenValue; 177 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({
128 }, 128 },
129 129
130 getFormat() { 130 getFormat() {
131 const { format, showHour, showMinute, showSecond } = this.props; 131 const { format, showHour, showMinute, showSecond, use12Hours } = this.props;
132 if (format) { 132 if (format) {
133 return format; 133 return format;
134 } 134 }
135
136 if (use12Hours) {
137 const fmtString = ([
138 showHour ? 'h' : '',
139 showMinute ? 'mm' : '',
140 showSecond ? 'ss' : '',
141 ].filter(item => !!item).join(':'));
142
143 return fmtString.concat(' a');
144 }
145
135 return [ 146 return [
136 showHour ? 'HH' : '', 147 showHour ? 'HH' : '',
137 showMinute ? 'mm' : '', 148 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', () => {
315 }); 315 });
316 }); 316 });
317 }); 317 });
318
319
320 describe('select in 12 hours mode', () => {
321 it('renders correctly', (done) => {
322 const picker = renderPicker({
323 use12Hours: true,
324 defaultValue: moment().hour(14).minute(0).second(0),
325 showSecond: false,
326 format: undefined,
327 });
328 expect(picker.state.open).not.to.be.ok();
329 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
330 'rc-time-picker-input')[0];
331 let selector;
332 async.series([(next) => {
333 expect(picker.state.open).to.be(false);
334
335 Simulate.click(input);
336 setTimeout(next, 100);
337 }, (next) => {
338 expect(picker.state.open).to.be(true);
339 selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
340 'rc-time-picker-panel-select');
341 expect((input).value).to.be('2:00 pm');
342
343 setTimeout(next, 100);
344 }, (next) => {
345 expect(selector.length).to.be(3);
346
347 next();
348 }], () => {
349 done();
350 });
351 });
352
353
354 it('renders 12am correctly', (done) => {
355 const picker = renderPicker({
356 use12Hours: true,
357 defaultValue: moment().hour(0).minute(0).second(0),
358 showSecond: false,
359 format: undefined,
360 });
361 expect(picker.state.open).not.to.be.ok();
362 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
363 'rc-time-picker-input')[0];
364 let selector;
365 async.series([(next) => {
366 expect(picker.state.open).to.be(false);
367
368 Simulate.click(input);
369 setTimeout(next, 100);
370 }, (next) => {
371 expect(picker.state.open).to.be(true);
372 selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
373 'rc-time-picker-panel-select');
374 expect((input).value).to.be('12:00 am');
375
376 setTimeout(next, 100);
377 }, (next) => {
378 expect(selector.length).to.be(3);
379
380 next();
381 }], () => {
382 done();
383 });
384 });
385 });
318}); 386});