From 95699887ac75de5dff6bd25278289e31e4745482 Mon Sep 17 00:00:00 2001 From: Antony Shaleynikov Date: Wed, 1 Mar 2017 23:58:06 +0300 Subject: Added 12hours display support --- examples/12hours.html | 0 examples/12hours.js | 30 ++++++++++++++++++++ src/Combobox.jsx | 78 ++++++++++++++++++++++++++++++++++++++++++++++----- src/Panel.jsx | 5 +++- src/Select.jsx | 2 +- src/TimePicker.jsx | 5 +++- 6 files changed, 110 insertions(+), 10 deletions(-) create mode 100644 examples/12hours.html create mode 100644 examples/12hours.js diff --git a/examples/12hours.html b/examples/12hours.html new file mode 100644 index 0000000..e69de29 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 @@ +/* eslint no-console:0 */ + +import 'rc-time-picker/assets/index.less'; + +import React from 'react'; +import ReactDom from 'react-dom'; + +import moment from 'moment'; + +import TimePicker from 'rc-time-picker'; + +const showSecond = false; +const str = showSecond ? 'HH:mm:ss' : 'HH:mm'; + +const now = moment().hour(14).minute(30); + +function onChange(value) { + console.log(value && value.format(str)); +} + +ReactDom.render( + , + document.getElementById('__react-content') +); 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({ disabledMinutes: PropTypes.func, disabledSeconds: PropTypes.func, onCurrentSelectPanelChange: PropTypes.func, + show12Hours: PropTypes.bool, }, onItemChange(type, itemValue) { - const { onChange, defaultOpenValue } = this.props; + const { onChange, defaultOpenValue, show12Hours } = this.props; const value = (this.props.value || defaultOpenValue).clone(); + if (type === 'hour') { - value.hour(itemValue); + if (show12Hours) { + if (value.hour() > 12 || !value.hour()) { + value.hour(+itemValue + 12); + } else { + value.hour(+itemValue); + } + } else { + value.hour(+itemValue); + } } else if (type === 'minute') { - value.minute(itemValue); + value.minute(+itemValue); + } else if (type === 'ampm') { + if (show12Hours) { + if (itemValue === 'PM' && value.hour() <= 12) { + value.hour(value.hour() + 12); + } + + if (itemValue === 'AM') { + if (!value.hour()) { + value.hour(12); + } else + if (value.hour() > 12) { + value.hour(value.hour() - 12); + } + } + } } else { - value.second(itemValue); + value.second(+itemValue); } onChange(value); }, @@ -55,17 +80,34 @@ const Combobox = React.createClass({ }, getHourSelect(hour) { - const { prefixCls, hourOptions, disabledHours, showHour } = this.props; + const { prefixCls, hourOptions, disabledHours, showHour, show12Hours } = this.props; if (!showHour) { return null; } const disabledOptions = disabledHours(); + let hourAdj; + if (show12Hours) { + if (hour > 12) { + hourAdj = hour - 12; + } else { + hourAdj = hour || 12; + } + } else { + hourAdj = hour; + } + + let hourOptionsAdj; + if (show12Hours) { + hourOptionsAdj = hourOptions.filter(h => h <= 12 && h > 0); + } else { + hourOptionsAdj = hourOptions; + } return ( + ); + }, + render() { const { prefixCls, defaultOpenValue } = this.props; const value = this.props.value || defaultOpenValue; @@ -121,6 +184,7 @@ const Combobox = React.createClass({ {this.getHourSelect(value.hour())} {this.getMinuteSelect(value.minute())} {this.getSecondSelect(value.second())} + {this.getAMPMSelect(value.hour())} ); }, 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({ showMinute: PropTypes.bool, showSecond: PropTypes.bool, onClear: PropTypes.func, + show12Hours: PropTypes.bool, addon: PropTypes.func, }, @@ -49,6 +50,7 @@ const Panel = React.createClass({ disabledMinutes: noop, disabledSeconds: noop, defaultOpenValue: moment(), + show12Hours: false, addon: noop, }; }, @@ -90,7 +92,7 @@ const Panel = React.createClass({ const { prefixCls, className, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond, - format, defaultOpenValue, clearText, onEsc, addon, + format, defaultOpenValue, clearText, onEsc, addon, show12Hours, } = this.props; const { value, currentSelectPanel, @@ -140,6 +142,7 @@ const Panel = React.createClass({ disabledMinutes={disabledMinutes} disabledSeconds={disabledSeconds} onCurrentSelectPanelChange={this.onCurrentSelectPanelChange} + show12Hours={show12Hours} /> {addon(this)} 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({ }); let onclick = null; if (!item.disabled) { - onclick = this.onSelect.bind(this, +item.value); + onclick = this.onSelect.bind(this, item.value); } return (
  • ); -- cgit v1.2.3 From f8e59df8666ee32ae769f35cd01b4de4d4e4bed1 Mon Sep 17 00:00:00 2001 From: Antony Shaleynikov Date: Thu, 2 Mar 2017 00:13:32 +0300 Subject: Readme file was updated to reflect show12Hours option --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 9ecbc94..b9d06fd 100644 --- a/README.md +++ b/README.md @@ -66,6 +66,7 @@ API | disabledHours | Function | disabled hour options | | | disabledMinutes | Function | disabled minute options | | | disabledSeconds | Function | disabled second options | | +| show12Hours | Boolean | 12 hours display mode | | | hideDisabledOptions | Boolean | whether hide disabled options | | | onChange | Function | null | called when select a different value | | addon | Function | nothing | 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()`.| -- cgit v1.2.3 From dd275f7df354e218d170ddbcc1eadff1427db76b Mon Sep 17 00:00:00 2001 From: Antony Shaleynikov Date: Thu, 2 Mar 2017 11:02:45 +0300 Subject: show12Hours prop was renamed to use12Hours --- README.md | 4 ++-- src/Combobox.jsx | 18 +++++++++--------- src/Panel.jsx | 8 ++++---- src/TimePicker.jsx | 8 ++++---- 4 files changed, 19 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index b9d06fd..d8a35b9 100644 --- a/README.md +++ b/README.md @@ -60,13 +60,13 @@ API | value | moment | null | current value | | placeholder | String | '' | time input's placeholder | | showHour | Boolean | whether show hour | | -| showMinute | Boolean | whether show minute | | +| showMinute | Boolean | whether show minute | | | showSecond | Boolean | whether show second | | | format | String | | | | disabledHours | Function | disabled hour options | | | disabledMinutes | Function | disabled minute options | | | disabledSeconds | Function | disabled second options | | -| show12Hours | Boolean | 12 hours display mode | | +| use12Hours | Boolean | 12 hours display mode | | | hideDisabledOptions | Boolean | whether hide disabled options | | | onChange | Function | null | called when select a different value | | addon | Function | nothing | 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()`.| diff --git a/src/Combobox.jsx b/src/Combobox.jsx index e31b7fd..339764c 100644 --- a/src/Combobox.jsx +++ b/src/Combobox.jsx @@ -35,15 +35,15 @@ const Combobox = React.createClass({ disabledMinutes: PropTypes.func, disabledSeconds: PropTypes.func, onCurrentSelectPanelChange: PropTypes.func, - show12Hours: PropTypes.bool, + use12Hours: PropTypes.bool, }, onItemChange(type, itemValue) { - const { onChange, defaultOpenValue, show12Hours } = this.props; + const { onChange, defaultOpenValue, use12Hours } = this.props; const value = (this.props.value || defaultOpenValue).clone(); if (type === 'hour') { - if (show12Hours) { + if (use12Hours) { if (value.hour() > 12 || !value.hour()) { value.hour(+itemValue + 12); } else { @@ -55,7 +55,7 @@ const Combobox = React.createClass({ } else if (type === 'minute') { value.minute(+itemValue); } else if (type === 'ampm') { - if (show12Hours) { + if (use12Hours) { if (itemValue === 'PM' && value.hour() <= 12) { value.hour(value.hour() + 12); } @@ -80,13 +80,13 @@ const Combobox = React.createClass({ }, getHourSelect(hour) { - const { prefixCls, hourOptions, disabledHours, showHour, show12Hours } = this.props; + const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this.props; if (!showHour) { return null; } const disabledOptions = disabledHours(); let hourAdj; - if (show12Hours) { + if (use12Hours) { if (hour > 12) { hourAdj = hour - 12; } else { @@ -97,7 +97,7 @@ const Combobox = React.createClass({ } let hourOptionsAdj; - if (show12Hours) { + if (use12Hours) { hourOptionsAdj = hourOptions.filter(h => h <= 12 && h > 0); } else { hourOptionsAdj = hourOptions; @@ -156,8 +156,8 @@ const Combobox = React.createClass({ }, getAMPMSelect() { - const { prefixCls, show12Hours, defaultOpenValue } = this.props; - if (!show12Hours) { + const { prefixCls, use12Hours, defaultOpenValue } = this.props; + if (!use12Hours) { return null; } const value = this.props.value || defaultOpenValue; diff --git a/src/Panel.jsx b/src/Panel.jsx index d02bd01..df128ff 100644 --- a/src/Panel.jsx +++ b/src/Panel.jsx @@ -37,7 +37,7 @@ const Panel = React.createClass({ showMinute: PropTypes.bool, showSecond: PropTypes.bool, onClear: PropTypes.func, - show12Hours: PropTypes.bool, + use12Hours: PropTypes.bool, addon: PropTypes.func, }, @@ -50,7 +50,7 @@ const Panel = React.createClass({ disabledMinutes: noop, disabledSeconds: noop, defaultOpenValue: moment(), - show12Hours: false, + use12Hours: false, addon: noop, }; }, @@ -92,7 +92,7 @@ const Panel = React.createClass({ const { prefixCls, className, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond, - format, defaultOpenValue, clearText, onEsc, addon, show12Hours, + format, defaultOpenValue, clearText, onEsc, addon, use12Hours, } = this.props; const { value, currentSelectPanel, @@ -142,7 +142,7 @@ const Panel = React.createClass({ disabledMinutes={disabledMinutes} disabledSeconds={disabledSeconds} onCurrentSelectPanelChange={this.onCurrentSelectPanelChange} - show12Hours={show12Hours} + use12Hours={use12Hours} /> {addon(this)} diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx index f73d2b1..6b76223 100644 --- a/src/TimePicker.jsx +++ b/src/TimePicker.jsx @@ -43,7 +43,7 @@ const Picker = React.createClass({ addon: PropTypes.func, name: PropTypes.string, autoComplete: PropTypes.string, - show12Hours: PropTypes.bool, + use12Hours: PropTypes.bool, }, getDefaultProps() { @@ -68,7 +68,7 @@ const Picker = React.createClass({ onOpen: noop, onClose: noop, addon: noop, - show12Hours: false, + use12Hours: false, }; }, @@ -144,7 +144,7 @@ const Picker = React.createClass({ prefixCls, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText, - addon, show12Hours, + addon, use12Hours, } = this.props; return ( ); -- cgit v1.2.3 From dd2f6abda00cea99ec0a24e3f162fabeba7ac176 Mon Sep 17 00:00:00 2001 From: Antony Shaleynikov Date: Thu, 2 Mar 2017 15:42:05 +0300 Subject: Updated 12 hours example, added default format for 12 hours mode, updated tests --- examples/12hours.js | 4 +-- src/Combobox.jsx | 32 +++++++++++------------- src/TimePicker.jsx | 13 +++++++++- tests/Select.spec.jsx | 68 +++++++++++++++++++++++++++++++++++++++++++++++++++ 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 (