const now = new GregorianCalendar(zhCn);
now.setTime(Date.now());
+function generateOptions(length, excludedOptions) {
+ const arr = [];
+ for (let value = 0; value < length; value++) {
+ if (excludedOptions.indexOf(value) < 0) {
+ arr.push(value);
+ }
+ }
+ return arr;
+}
+
function onChange(value) {
console.log(value && formatter.format(value));
}
+function disabledHours() {
+ return [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23];
+}
+
+function disabledMinutes(h) {
+ switch (h) {
+ case 9:
+ return generateOptions(60, [30]);
+ case 21:
+ return generateOptions(60, [0]);
+ default:
+ return generateOptions(60, [0, 30]);
+ }
+}
+
+function disabledSeconds(h, m) {
+ return [h + m % 60];
+}
+
ReactDom.render(
<TimePicker formatter={formatter} locale={TimePickerLocale}
showSecond={showSecond}
defaultValue={now}
className="xxx"
onChange={onChange}
- disabledHours={[0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]}
- disabledMinutes={[0, 2, 4, 6, 8]} />,
+ disabledHours={disabledHours}
+ disabledMinutes={disabledMinutes}
+ disabledSeconds={disabledSeconds} />,
document.getElementById('__react-content')
);
defaultValue={now}
className="xxx"
onChange={onChange}
- disabledHours={[0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]}
- disabledMinutes={[0, 2, 4, 6, 8]}
- hideDisabledOptions={true} />,
+ disabledHours={() => [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]}
+ disabledMinutes={() => [0, 2, 4, 6, 8]}
+ hideDisabledOptions />,
document.getElementById('__react-content')
);
style: PropTypes.object,
className: PropTypes.string,
showSecond: PropTypes.bool,
- disabledHours: PropTypes.array,
- disabledMinutes: PropTypes.array,
- disabledSeconds: PropTypes.array,
+ disabledHours: PropTypes.func,
+ disabledMinutes: PropTypes.func,
+ disabledSeconds: PropTypes.func,
hideDisabledOptions: PropTypes.bool,
onChange: PropTypes.func,
onOpen: PropTypes.func,
allowEmpty: true,
showHour: true,
showSecond: true,
- disabledHours: null,
- disabledMinutes: null,
- disabledSeconds: null,
+ disabledHours: noop,
+ disabledMinutes: noop,
+ disabledSeconds: noop,
hideDisabledOptions: false,
placement: 'bottomLeft',
onChange: noop,
hourOptions: PropTypes.array,
minuteOptions: PropTypes.array,
secondOptions: PropTypes.array,
- disabledHours: PropTypes.array,
- disabledMinutes: PropTypes.array,
- disabledSeconds: PropTypes.array,
+ disabledHours: PropTypes.func,
+ disabledMinutes: PropTypes.func,
+ disabledSeconds: PropTypes.func,
onCurrentSelectPanelChange: PropTypes.func,
},
if (!showHour) {
return null;
}
+ const disabledOptions = disabledHours();
+
return (
<Select
prefixCls={prefixCls}
- options={hourOptions.map(option => formatOption(option, disabledHours))}
+ options={hourOptions.map(option => formatOption(option, disabledOptions))}
selectedIndex={hourOptions.indexOf(hour)}
type="hour"
onSelect={this.onItemChange}
},
getMinuteSelect(minute) {
- const { prefixCls, minuteOptions, disabledMinutes } = this.props;
+ const { prefixCls, minuteOptions, disabledMinutes, value } = this.props;
+ const disabledOptions = disabledMinutes(value.getHourOfDay());
+
return (
<Select
prefixCls={prefixCls}
- options={minuteOptions.map(option => formatOption(option, disabledMinutes))}
+ options={minuteOptions.map(option => formatOption(option, disabledOptions))}
selectedIndex={minuteOptions.indexOf(minute)}
type="minute"
onSelect={this.onItemChange}
},
getSecondSelect(second) {
- const { prefixCls, secondOptions, disabledSeconds, showSecond } = this.props;
+ const { prefixCls, secondOptions, disabledSeconds, showSecond, value } = this.props;
if (!showSecond) {
return null;
}
+ const disabledOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes());
+
return (
<Select
prefixCls={prefixCls}
- options={secondOptions.map(option => formatOption(option, disabledSeconds))}
+ options={secondOptions.map(option => formatOption(option, disabledOptions))}
selectedIndex={secondOptions.indexOf(second)}
type="second"
onSelect={this.onItemChange}
hourOptions: PropTypes.array,
minuteOptions: PropTypes.array,
secondOptions: PropTypes.array,
- disabledHours: PropTypes.array,
- disabledMinutes: PropTypes.array,
- disabledSeconds: PropTypes.array,
+ disabledHours: PropTypes.func,
+ disabledMinutes: PropTypes.func,
+ disabledSeconds: PropTypes.func,
onChange: PropTypes.func,
onClear: PropTypes.func,
onEsc: PropTypes.func,
}
// if time value is disabled, response warning.
+ const disabledHourOptions = disabledHours();
+ const disabledMinuteOptions = disabledMinutes(value.getHourOfDay());
+ const disabledSecondOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes());
if (
- (disabledHours && disabledHours.indexOf(value.getHourOfDay()) >= 0) ||
- (disabledMinutes && disabledMinutes.indexOf(value.getMinutes()) >= 0) ||
- (disabledSeconds && disabledSeconds.indexOf(value.getSeconds()) >= 0)
+ (disabledHourOptions && disabledHourOptions.indexOf(value.getHourOfDay()) >= 0) ||
+ (disabledMinuteOptions && disabledMinuteOptions.indexOf(value.getMinutes()) >= 0) ||
+ (disabledSecondOptions && disabledSecondOptions.indexOf(value.getSeconds()) >= 0)
) {
this.setState({
invalid: true,
placeholder: PropTypes.string,
gregorianCalendarLocale: PropTypes.object,
formatter: PropTypes.object,
- disabledHours: PropTypes.array,
- disabledMinutes: PropTypes.array,
- disabledSeconds: PropTypes.array,
+ disabledHours: PropTypes.func,
+ disabledMinutes: PropTypes.func,
+ disabledSeconds: PropTypes.func,
hideDisabledOptions: PropTypes.bool,
onChange: PropTypes.func,
onEsc: PropTypes.func,
getDefaultProps() {
return {
- disabledHours: null,
- disabledMinutes: null,
- disabledSeconds: null,
- hideDisabledOptions: false,
onChange: noop,
onClear: noop,
};
render() {
const { locale, prefixCls, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props;
const value = this.state.value;
- const hourOptions = generateOptions(24, disabledHours, hideDisabledOptions);
- const minuteOptions = generateOptions(60, disabledMinutes, hideDisabledOptions);
- const secondOptions = generateOptions(60, disabledSeconds, hideDisabledOptions);
+ const disabledHourOptions = disabledHours();
+ const disabledMinuteOptions = disabledMinutes(value.getHourOfDay());
+ const disabledSecondOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes());
+ const hourOptions = generateOptions(24, disabledHourOptions, hideDisabledOptions);
+ const minuteOptions = generateOptions(60, disabledMinuteOptions, hideDisabledOptions);
+ const secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions);
return (
<div className={`${prefixCls}-inner`}>
it('carry disabled correctly', (done) => {
const picker = renderPicker({
- disabledMinutes: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
+ disabledMinutes(h) {
+ return [h];
+ },
+ disabledSeconds(h, m) {
+ return [h + m % 60];
+ },
});
expect(picker.state.open).not.to.be.ok();
const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
- ReactDOM.findDOMNode(header).value = '12:15:78';
+ ReactDOM.findDOMNode(header).value = '10:09:78';
Simulate.change(header);
setTimeout(next, 100);
}, (next) => {
expect(picker.state.open).to.be(true);
expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
- expect(ReactDOM.findDOMNode(header).value).to.be('12:15:78');
+ expect(ReactDOM.findDOMNode(header).value).to.be('10:09:78');
expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
- ReactDOM.findDOMNode(header).value = '12:10:78';
+ ReactDOM.findDOMNode(header).value = '10:10:78';
+ Simulate.change(header);
+ setTimeout(next, 100);
+ }, (next) => {
+ expect(picker.state.open).to.be(true);
+ expect(ReactDOM.findDOMNode(header).value).to.be('10:11:18');
+ expect(ReactDOM.findDOMNode(input).value).to.be('10:11:18');
+
+ ReactDOM.findDOMNode(header).value = '10:09:19';
+ Simulate.change(header);
+ setTimeout(next, 100);
+ }, (next) => {
+ expect(picker.state.open).to.be(true);
+ expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
+ expect(ReactDOM.findDOMNode(header).value).to.be('10:09:19');
+ expect(ReactDOM.findDOMNode(input).value).to.be('10:11:18');
+
+ ReactDOM.findDOMNode(header).value = '10:09:20';
Simulate.change(header);
setTimeout(next, 100);
}, (next) => {
expect(picker.state.open).to.be(true);
- expect(ReactDOM.findDOMNode(header).value).to.be('12:11:18');
- expect(ReactDOM.findDOMNode(input).value).to.be('12:11:18');
+ expect(ReactDOM.findDOMNode(header).value).to.be('10:09:20');
+ expect(ReactDOM.findDOMNode(input).value).to.be('10:09:20');
next();
}], () => {
it('carry hidden correctly', (done) => {
const picker = renderPicker({
- disabledMinutes: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22],
- hideDisabledOptions: true
+ disabledMinutes(h) {
+ return [h];
+ },
+ disabledSeconds(h, m) {
+ return [h + m % 60];
+ },
+ hideDisabledOptions: true,
});
expect(picker.state.open).not.to.be.ok();
const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
- ReactDOM.findDOMNode(header).value = '12:15:78';
+ ReactDOM.findDOMNode(header).value = '10:09:78';
Simulate.change(header);
setTimeout(next, 100);
}, (next) => {
expect(picker.state.open).to.be(true);
expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
- expect(ReactDOM.findDOMNode(header).value).to.be('12:15:78');
+ expect(ReactDOM.findDOMNode(header).value).to.be('10:09:78');
expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
- ReactDOM.findDOMNode(header).value = '12:10:78';
+ ReactDOM.findDOMNode(header).value = '10:10:78';
+ Simulate.change(header);
+ setTimeout(next, 100);
+ }, (next) => {
+ expect(picker.state.open).to.be(true);
+ expect(ReactDOM.findDOMNode(header).value).to.be('10:11:18');
+ expect(ReactDOM.findDOMNode(input).value).to.be('10:11:18');
+
+ ReactDOM.findDOMNode(header).value = '10:09:19';
+ Simulate.change(header);
+ setTimeout(next, 100);
+ }, (next) => {
+ expect(picker.state.open).to.be(true);
+ expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid');
+ expect(ReactDOM.findDOMNode(header).value).to.be('10:09:19');
+ expect(ReactDOM.findDOMNode(input).value).to.be('10:11:18');
+
+ ReactDOM.findDOMNode(header).value = '10:09:20';
Simulate.change(header);
setTimeout(next, 100);
}, (next) => {
expect(picker.state.open).to.be(true);
- expect(ReactDOM.findDOMNode(header).value).to.be('12:11:18');
- expect(ReactDOM.findDOMNode(input).value).to.be('12:11:18');
+ expect(ReactDOM.findDOMNode(header).value).to.be('10:09:20');
+ expect(ReactDOM.findDOMNode(input).value).to.be('10:09:20');
next();
}], () => {
formatter={formatter}
locale={TimePickerLocale}
showSecond={showSecond}
- defaultValue={formatTime('01:02:03', formatter)}
+ defaultValue={formatTime('01:02:04', formatter)}
{...props}
/>, container);
}
expect(picker.state.open).to.be(true);
header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
expect(header).to.be.ok();
- expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
- expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
+ expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04');
+ expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04');
const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0];
const option = selector.getElementsByTagName('li')[19];
}, (next) => {
expect(change).to.be.ok();
expect(change.getHourOfDay()).to.be(19);
- expect(ReactDOM.findDOMNode(header).value).to.be('19:02:03');
- expect(ReactDOM.findDOMNode(input).value).to.be('19:02:03');
+ expect(ReactDOM.findDOMNode(header).value).to.be('19:02:04');
+ expect(ReactDOM.findDOMNode(input).value).to.be('19:02:04');
expect(picker.state.open).to.be.ok();
next();
expect(picker.state.open).to.be(true);
header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
expect(header).to.be.ok();
- expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
- expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
+ expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04');
+ expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04');
const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1];
const option = selector.getElementsByTagName('li')[19];
}, (next) => {
expect(change).to.be.ok();
expect(change.getMinutes()).to.be(19);
- expect(ReactDOM.findDOMNode(header).value).to.be('01:19:03');
- expect(ReactDOM.findDOMNode(input).value).to.be('01:19:03');
+ expect(ReactDOM.findDOMNode(header).value).to.be('01:19:04');
+ expect(ReactDOM.findDOMNode(input).value).to.be('01:19:04');
expect(picker.state.open).to.be.ok();
next();
expect(picker.state.open).to.be(true);
header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
expect(header).to.be.ok();
- expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
- expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
+ expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04');
+ expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04');
const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[2];
const option = selector.getElementsByTagName('li')[19];
onChange(v) {
change = v;
},
- disabledMinutes: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
+ disabledMinutes(h) {
+ return [h];
+ },
+ disabledSeconds(h, m) {
+ return [h + m % 60];
+ },
});
expect(picker.state.open).not.to.be.ok();
const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
expect(picker.state.open).to.be(true);
header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
expect(header).to.be.ok();
- expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
- expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
+ expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04');
+ expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04');
const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1];
- const option = selector.getElementsByTagName('li')[6];
+ const option = selector.getElementsByTagName('li')[1];
Simulate.click(option);
setTimeout(next, 100);
}, (next) => {
expect(change).not.to.be.ok();
- expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
- expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
+ expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04');
+ expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04');
+ expect(picker.state.open).to.be.ok();
+
+ const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[2];
+ const option = selector.getElementsByTagName('li')[3];
+ Simulate.click(option);
+ setTimeout(next, 100);
+ }, (next) => {
+ expect(change).not.to.be.ok();
+ expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04');
+ expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04');
expect(picker.state.open).to.be.ok();
const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1];
}, (next) => {
expect(change).to.be.ok();
expect(change.getMinutes()).to.be(7);
- expect(ReactDOM.findDOMNode(header).value).to.be('01:07:03');
- expect(ReactDOM.findDOMNode(input).value).to.be('01:07:03');
+ expect(ReactDOM.findDOMNode(header).value).to.be('01:07:04');
+ expect(ReactDOM.findDOMNode(input).value).to.be('01:07:04');
expect(picker.state.open).to.be.ok();
next();
onChange(v) {
change = v;
},
- disabledHours: [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23],
- hideDisabledOptions: true
+ disabledHours() {
+ return [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23];
+ },
+ hideDisabledOptions: true,
});
expect(picker.state.open).not.to.be.ok();
const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
expect(picker.state.open).to.be(true);
header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
expect(header).to.be.ok();
- expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
- expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
+ expect(ReactDOM.findDOMNode(header).value).to.be('01:02:04');
+ expect(ReactDOM.findDOMNode(input).value).to.be('01:02:04');
const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0];
const option = selector.getElementsByTagName('li')[3];
}, (next) => {
expect(change).to.be.ok();
expect(change.getHourOfDay()).to.be(6);
- expect(ReactDOM.findDOMNode(header).value).to.be('06:02:03');
- expect(ReactDOM.findDOMNode(input).value).to.be('06:02:03');
+ expect(ReactDOM.findDOMNode(header).value).to.be('06:02:04');
+ expect(ReactDOM.findDOMNode(input).value).to.be('06:02:04');
expect(picker.state.open).to.be.ok();
const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0];
}, (next) => {
expect(change).to.be.ok();
expect(change.getHourOfDay()).to.be(8);
- expect(ReactDOM.findDOMNode(header).value).to.be('08:02:03');
- expect(ReactDOM.findDOMNode(input).value).to.be('08:02:03');
+ expect(ReactDOM.findDOMNode(header).value).to.be('08:02:04');
+ expect(ReactDOM.findDOMNode(input).value).to.be('08:02:04');
expect(picker.state.open).to.be.ok();
next();