aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--examples/12hours.html0
-rw-r--r--examples/12hours.js30
-rw-r--r--src/Combobox.jsx78
-rw-r--r--src/Panel.jsx5
-rw-r--r--src/Select.jsx2
-rw-r--r--src/TimePicker.jsx5
6 files changed, 110 insertions, 10 deletions
diff --git a/examples/12hours.html b/examples/12hours.html
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/examples/12hours.html
diff --git a/examples/12hours.js b/examples/12hours.js
new file mode 100644
index 0000000..18fb626
--- /dev/null
+++ b/examples/12hours.js
@@ -0,0 +1,30 @@
1/* eslint no-console:0 */
2
3import 'rc-time-picker/assets/index.less';
4
5import React from 'react';
6import ReactDom from 'react-dom';
7
8import moment from 'moment';
9
10import TimePicker from 'rc-time-picker';
11
12const showSecond = false;
13const str = showSecond ? 'HH:mm:ss' : 'HH:mm';
14
15const now = moment().hour(14).minute(30);
16
17function onChange(value) {
18 console.log(value && value.format(str));
19}
20
21ReactDom.render(
22 <TimePicker
23 showSecond={showSecond}
24 defaultValue={now}
25 className="xxx"
26 onChange={onChange}
27 show12Hours
28 />,
29 document.getElementById('__react-content')
30);
diff --git a/src/Combobox.jsx b/src/Combobox.jsx
index 013617c..e31b7fd 100644
--- a/src/Combobox.jsx
+++ b/src/Combobox.jsx
@@ -35,17 +35,42 @@ const Combobox = React.createClass({
35 disabledMinutes: PropTypes.func, 35 disabledMinutes: PropTypes.func,
36 disabledSeconds: PropTypes.func, 36 disabledSeconds: PropTypes.func,
37 onCurrentSelectPanelChange: PropTypes.func, 37 onCurrentSelectPanelChange: PropTypes.func,
38 show12Hours: PropTypes.bool,
38 }, 39 },
39 40
40 onItemChange(type, itemValue) { 41 onItemChange(type, itemValue) {
41 const { onChange, defaultOpenValue } = this.props; 42 const { onChange, defaultOpenValue, show12Hours } = this.props;
42 const value = (this.props.value || defaultOpenValue).clone(); 43 const value = (this.props.value || defaultOpenValue).clone();
44
43 if (type === 'hour') { 45 if (type === 'hour') {
44 value.hour(itemValue); 46 if (show12Hours) {
47 if (value.hour() > 12 || !value.hour()) {
48 value.hour(+itemValue + 12);
49 } else {
50 value.hour(+itemValue);
51 }
52 } else {
53 value.hour(+itemValue);
54 }
45 } else if (type === 'minute') { 55 } else if (type === 'minute') {
46 value.minute(itemValue); 56 value.minute(+itemValue);
57 } else if (type === 'ampm') {
58 if (show12Hours) {
59 if (itemValue === 'PM' && value.hour() <= 12) {
60 value.hour(value.hour() + 12);
61 }
62
63 if (itemValue === 'AM') {
64 if (!value.hour()) {
65 value.hour(12);
66 } else
67 if (value.hour() > 12) {
68 value.hour(value.hour() - 12);
69 }
70 }
71 }
47 } else { 72 } else {
48 value.second(itemValue); 73 value.second(+itemValue);
49 } 74 }
50 onChange(value); 75 onChange(value);
51 }, 76 },
@@ -55,17 +80,34 @@ const Combobox = React.createClass({
55 }, 80 },
56 81
57 getHourSelect(hour) { 82 getHourSelect(hour) {
58 const { prefixCls, hourOptions, disabledHours, showHour } = this.props; 83 const { prefixCls, hourOptions, disabledHours, showHour, show12Hours } = this.props;
59 if (!showHour) { 84 if (!showHour) {
60 return null; 85 return null;
61 } 86 }
62 const disabledOptions = disabledHours(); 87 const disabledOptions = disabledHours();
88 let hourAdj;
89 if (show12Hours) {
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;
100 if (show12Hours) {
101 hourOptionsAdj = hourOptions.filter(h => h <= 12 && h > 0);
102 } else {
103 hourOptionsAdj = hourOptions;
104 }
63 105
64 return ( 106 return (
65 <Select 107 <Select
66 prefixCls={prefixCls} 108 prefixCls={prefixCls}
67 options={hourOptions.map(option => formatOption(option, disabledOptions))} 109 options={hourOptionsAdj.map(option => formatOption(option, disabledOptions))}
68 selectedIndex={hourOptions.indexOf(hour)} 110 selectedIndex={hourOptionsAdj.indexOf(hourAdj)}
69 type="hour" 111 type="hour"
70 onSelect={this.onItemChange} 112 onSelect={this.onItemChange}
71 onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')} 113 onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
@@ -113,6 +155,27 @@ const Combobox = React.createClass({
113 ); 155 );
114 }, 156 },
115 157
158 getAMPMSelect() {
159 const { prefixCls, show12Hours, defaultOpenValue } = this.props;
160 if (!show12Hours) {
161 return null;
162 }
163 const value = this.props.value || defaultOpenValue;
164 const AMPMOptions = [{ value: 'AM' }, { value: 'PM' }];
165 const selected = (!value.hour() || value.hour() > 12) ? 1 : 0;
166
167 return (
168 <Select
169 prefixCls={prefixCls}
170 options={AMPMOptions}
171 selectedIndex={selected}
172 type="ampm"
173 onSelect={this.onItemChange}
174 onMouseEnter={this.onEnterSelectPanel.bind(this, 'ampm')}
175 />
176 );
177 },
178
116 render() { 179 render() {
117 const { prefixCls, defaultOpenValue } = this.props; 180 const { prefixCls, defaultOpenValue } = this.props;
118 const value = this.props.value || defaultOpenValue; 181 const value = this.props.value || defaultOpenValue;
@@ -121,6 +184,7 @@ const Combobox = React.createClass({
121 {this.getHourSelect(value.hour())} 184 {this.getHourSelect(value.hour())}
122 {this.getMinuteSelect(value.minute())} 185 {this.getMinuteSelect(value.minute())}
123 {this.getSecondSelect(value.second())} 186 {this.getSecondSelect(value.second())}
187 {this.getAMPMSelect(value.hour())}
124 </div> 188 </div>
125 ); 189 );
126 }, 190 },
diff --git a/src/Panel.jsx b/src/Panel.jsx
index fddea1c..d02bd01 100644
--- a/src/Panel.jsx
+++ b/src/Panel.jsx
@@ -37,6 +37,7 @@ const Panel = React.createClass({
37 showMinute: PropTypes.bool, 37 showMinute: PropTypes.bool,
38 showSecond: PropTypes.bool, 38 showSecond: PropTypes.bool,
39 onClear: PropTypes.func, 39 onClear: PropTypes.func,
40 show12Hours: PropTypes.bool,
40 addon: PropTypes.func, 41 addon: PropTypes.func,
41 }, 42 },
42 43
@@ -49,6 +50,7 @@ const Panel = React.createClass({
49 disabledMinutes: noop, 50 disabledMinutes: noop,
50 disabledSeconds: noop, 51 disabledSeconds: noop,
51 defaultOpenValue: moment(), 52 defaultOpenValue: moment(),
53 show12Hours: false,
52 addon: noop, 54 addon: noop,
53 }; 55 };
54 }, 56 },
@@ -90,7 +92,7 @@ const Panel = React.createClass({
90 const { 92 const {
91 prefixCls, className, placeholder, disabledHours, disabledMinutes, 93 prefixCls, className, placeholder, disabledHours, disabledMinutes,
92 disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond, 94 disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond,
93 format, defaultOpenValue, clearText, onEsc, addon, 95 format, defaultOpenValue, clearText, onEsc, addon, show12Hours,
94 } = this.props; 96 } = this.props;
95 const { 97 const {
96 value, currentSelectPanel, 98 value, currentSelectPanel,
@@ -140,6 +142,7 @@ const Panel = React.createClass({
140 disabledMinutes={disabledMinutes} 142 disabledMinutes={disabledMinutes}
141 disabledSeconds={disabledSeconds} 143 disabledSeconds={disabledSeconds}
142 onCurrentSelectPanelChange={this.onCurrentSelectPanelChange} 144 onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
145 show12Hours={show12Hours}
143 /> 146 />
144 {addon(this)} 147 {addon(this)}
145 </div> 148 </div>
diff --git a/src/Select.jsx b/src/Select.jsx
index 238a776..5733b1a 100644
--- a/src/Select.jsx
+++ b/src/Select.jsx
@@ -58,7 +58,7 @@ const Select = React.createClass({
58 }); 58 });
59 let onclick = null; 59 let onclick = null;
60 if (!item.disabled) { 60 if (!item.disabled) {
61 onclick = this.onSelect.bind(this, +item.value); 61 onclick = this.onSelect.bind(this, item.value);
62 } 62 }
63 return (<li 63 return (<li
64 className={cls} 64 className={cls}
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
index e9d6d15..f73d2b1 100644
--- a/src/TimePicker.jsx
+++ b/src/TimePicker.jsx
@@ -43,6 +43,7 @@ const Picker = React.createClass({
43 addon: PropTypes.func, 43 addon: PropTypes.func,
44 name: PropTypes.string, 44 name: PropTypes.string,
45 autoComplete: PropTypes.string, 45 autoComplete: PropTypes.string,
46 show12Hours: PropTypes.bool,
46 }, 47 },
47 48
48 getDefaultProps() { 49 getDefaultProps() {
@@ -67,6 +68,7 @@ const Picker = React.createClass({
67 onOpen: noop, 68 onOpen: noop,
68 onClose: noop, 69 onClose: noop,
69 addon: noop, 70 addon: noop,
71 show12Hours: false,
70 }; 72 };
71 }, 73 },
72 74
@@ -142,7 +144,7 @@ const Picker = React.createClass({
142 prefixCls, placeholder, disabledHours, 144 prefixCls, placeholder, disabledHours,
143 disabledMinutes, disabledSeconds, hideDisabledOptions, 145 disabledMinutes, disabledSeconds, hideDisabledOptions,
144 allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText, 146 allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
145 addon, 147 addon, show12Hours,
146 } = this.props; 148 } = this.props;
147 return ( 149 return (
148 <Panel 150 <Panel
@@ -164,6 +166,7 @@ const Picker = React.createClass({
164 disabledMinutes={disabledMinutes} 166 disabledMinutes={disabledMinutes}
165 disabledSeconds={disabledSeconds} 167 disabledSeconds={disabledSeconds}
166 hideDisabledOptions={hideDisabledOptions} 168 hideDisabledOptions={hideDisabledOptions}
169 show12Hours={show12Hours}
167 addon={addon} 170 addon={addon}
168 /> 171 />
169 ); 172 );