--- /dev/null
+placeholder
--- /dev/null
+/* eslint no-console:0 */
+
+import 'rc-time-picker/assets/index.less';
+
+import React from 'react';
+import ReactDom from 'react-dom';
+
+import GregorianCalendar from 'gregorian-calendar';
+import DateTimeFormat from 'gregorian-calendar-format';
+import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
+
+import TimePicker from 'rc-time-picker';
+import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN';
+
+const showSecond = true;
+const str = showSecond ? 'HH:mm:ss' : 'HH:mm';
+
+const formatter = new DateTimeFormat(str);
+
+const now = new GregorianCalendar(zhCn);
+now.setTime(Date.now());
+
+function onChange(value) {
+ console.log(value && formatter.format(value));
+}
+
+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]} />,
+ document.getElementById('__react-content')
+);
--- /dev/null
+placeholder
--- /dev/null
+/* eslint no-console:0 */
+
+import 'rc-time-picker/assets/index.less';
+
+import React from 'react';
+import ReactDom from 'react-dom';
+
+import GregorianCalendar from 'gregorian-calendar';
+import DateTimeFormat from 'gregorian-calendar-format';
+import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
+
+import TimePicker from 'rc-time-picker';
+import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN';
+
+const showSecond = true;
+const str = showSecond ? 'HH:mm:ss' : 'HH:mm';
+
+const formatter = new DateTimeFormat(str);
+
+const now = new GregorianCalendar(zhCn);
+now.setTime(Date.now());
+
+function onChange(value) {
+ console.log(value && formatter.format(value));
+}
+
+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]}
+ hideDisabledOptions={true} />,
+ document.getElementById('__react-content')
+);
console.log(value && formatter.format(value));
}
-const options = {
- disabledHours() {
- return [0, 2, 21];
- },
- disabledMinutes(h) {
- return h === 22 ? [0, 3, 31] : [];
- },
- disabledSeconds(h, m) {
- return [];
- },
-};
-
ReactDom.render(
<TimePicker formatter={formatter} locale={TimePickerLocale}
showSecond={showSecond}
defaultValue={now}
className="xxx"
- onChange={onChange}
- disabledHours={[0, 2, 21]}
- disabledMinutes={[0, 2, 21]}
- disabledSeconds={[]}
- hideDisabledOptions={true} />,
+ onChange={onChange} />,
document.getElementById('__react-content')
);
}
let disabled = false;
- if (disabledOptions.indexOf(option) >= 0) {
+ if (disabledOptions && disabledOptions.indexOf(option) >= 0) {
disabled = true;
}
// if time value is disabled, response warning.
if (
- disabledHours.indexOf(value.getHourOfDay()) >= 0 ||
- disabledMinutes.indexOf(value.getMinutes()) >= 0 ||
- disabledSeconds.indexOf(value.getSeconds()) >= 0
+ (disabledHours && disabledHours.indexOf(value.getHourOfDay()) >= 0) ||
+ (disabledMinutes && disabledMinutes.indexOf(value.getMinutes()) >= 0) ||
+ (disabledSeconds && disabledSeconds.indexOf(value.getSeconds()) >= 0)
) {
this.setState({
invalid: true,
function generateOptions(length, disabledOptions, hideDisabledOptions) {
const arr = [];
for (let value = 0; value < length; value++) {
- if ((disabledOptions && disabledOptions.indexOf(value) < 0) || !hideDisabledOptions) {
+ if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) {
arr.push(value);
}
}
});
});
+ it('carry disabled correctly', (done) => {
+ const picker = renderPicker({
+ disabledMinutes: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
+ });
+ expect(picker.state.open).not.to.be.ok();
+ const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
+ let header;
+ async.series([(next) => {
+ Simulate.click(input);
+ setTimeout(next, 100);
+ }, (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');
+
+ ReactDOM.findDOMNode(header).value = '12:15: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(input).value).to.be('01:02:03');
+
+ ReactDOM.findDOMNode(header).value = '12:10:78';
+ 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');
+
+ next();
+ }], () => {
+ done();
+ });
+ });
+
+ it('carry hidden correctly', (done) => {
+ const picker = renderPicker({
+ disabledMinutes: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22],
+ hideDisabledOptions: true
+ });
+ expect(picker.state.open).not.to.be.ok();
+ const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
+ let header;
+ async.series([(next) => {
+ Simulate.click(input);
+ setTimeout(next, 100);
+ }, (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');
+
+ ReactDOM.findDOMNode(header).value = '12:15: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(input).value).to.be('01:02:03');
+
+ ReactDOM.findDOMNode(header).value = '12:10:78';
+ 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');
+
+ next();
+ }], () => {
+ done();
+ });
+ });
+
it('check correctly', (done) => {
const picker = renderPicker();
expect(picker.state.open).not.to.be.ok();
}, (next) => {
expect(picker.state.open).to.be(true);
header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
- const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0];
- const option = selector.getElementsByTagName('li')[19];
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');
+ const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0];
+ const option = selector.getElementsByTagName('li')[19];
Simulate.click(option);
setTimeout(next, 100);
}, (next) => {
}, (next) => {
expect(picker.state.open).to.be(true);
header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
- const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1];
- const option = selector.getElementsByTagName('li')[19];
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');
+ const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1];
+ const option = selector.getElementsByTagName('li')[19];
Simulate.click(option);
setTimeout(next, 100);
}, (next) => {
}, (next) => {
expect(picker.state.open).to.be(true);
header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
- const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[2];
- const option = selector.getElementsByTagName('li')[19];
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');
+ const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[2];
+ const option = selector.getElementsByTagName('li')[19];
Simulate.click(option);
setTimeout(next, 100);
}, (next) => {
done();
});
});
+
+ it('disabled correctly', (done) => {
+ let change;
+ const picker = renderPicker({
+ onChange(v) {
+ change = v;
+ },
+ disabledMinutes: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
+ });
+ expect(picker.state.open).not.to.be.ok();
+ const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
+ let header;
+ async.series([(next) => {
+ expect(picker.state.open).to.be(false);
+
+ Simulate.click(input);
+ setTimeout(next, 100);
+ }, (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');
+
+ const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1];
+ const option = selector.getElementsByTagName('li')[6];
+ 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(picker.state.open).to.be.ok();
+
+ const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1];
+ const option = selector.getElementsByTagName('li')[7];
+ Simulate.click(option);
+ setTimeout(next, 100);
+ }, (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(picker.state.open).to.be.ok();
+
+ next();
+ }], () => {
+ done();
+ });
+ });
+
+ it('hidden correctly', (done) => {
+ let change;
+ const picker = renderPicker({
+ onChange(v) {
+ change = v;
+ },
+ disabledHours: [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];
+ let header;
+ async.series([(next) => {
+ expect(picker.state.open).to.be(false);
+
+ Simulate.click(input);
+ setTimeout(next, 100);
+ }, (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');
+
+ const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0];
+ const option = selector.getElementsByTagName('li')[3];
+ Simulate.click(option);
+ setTimeout(next, 100);
+ }, (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(picker.state.open).to.be.ok();
+
+ const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0];
+ const option = selector.getElementsByTagName('li')[4];
+ Simulate.click(option);
+ setTimeout(next, 100);
+ }, (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(picker.state.open).to.be.ok();
+
+ next();
+ }], () => {
+ done();
+ });
+ });
});
});