aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorMG12 <wuzhao.mail@gmail.com>2015-12-12 20:34:00 +0800
committerMG12 <wuzhao.mail@gmail.com>2015-12-12 20:34:00 +0800
commit518b852e8bd9c50a6c5c7e84cddecb5c94ebb5b6 (patch)
tree664ef5377589dc3c4def7e732dfaa76e89da1fb1
parent182e9fccc90ae709322b7cc314c8775a9d8d46b8 (diff)
downloadtime-picker-518b852e8bd9c50a6c5c7e84cddecb5c94ebb5b6.tar.gz
time-picker-518b852e8bd9c50a6c5c7e84cddecb5c94ebb5b6.tar.zst
time-picker-518b852e8bd9c50a6c5c7e84cddecb5c94ebb5b6.zip
add new options about disabled time
Diffstat
-rw-r--r--HISTORY.md14
-rw-r--r--README.md40
-rw-r--r--assets/index/Select.less10
-rw-r--r--examples/pick-time.js18
-rw-r--r--package.json2
-rw-r--r--src/TimePicker.jsx20
-rw-r--r--src/module/Combobox.jsx31
-rw-r--r--src/module/Header.jsx18
-rw-r--r--src/module/Panel.jsx34
-rw-r--r--src/module/Select.jsx10
10 files changed, 140 insertions, 57 deletions
diff --git a/HISTORY.md b/HISTORY.md
index ebc3b9e..48c386a 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -2,16 +2,22 @@
2 2
3--- 3---
4 4
51.0.0-alpha7 / 2015-12-12
6------------------
7
8`new` add options `disabledHours`, `disabledMinutes`, `disabledSeconds` and `hideDisabledOptions`.
9`remove` remove options `hourOptions`, `minuteOptions` and `secondOptions`.
10
51.0.0-alpha2 / 2015-12-03 111.0.0-alpha2 / 2015-12-03
6------------------ 12------------------
7 13
8`fix` IE8 compatible. 14`fixed` IE8 compatible.
9`new` add test users. 15`new` add test users.
10 16
110.7.1 / 2015-11-20 170.7.1 / 2015-11-20
12------------------ 18------------------
13 19
14`fix` change value to null when clear input content to remove the react warning. 20`fixed` change value to null when clear input content to remove the react warning.
15 21
160.7.0 / 2015-11-20 220.7.0 / 2015-11-20
17------------------ 23------------------
@@ -21,7 +27,7 @@
210.5.6 / 2015-11-19 270.5.6 / 2015-11-19
22------------------ 28------------------
23 29
24`fix` use another method to change time and fix the bug about value.getTime(). 30`fixed` use another method to change time and fix the bug about value.getTime().
25 31
260.5.4 / 2015-11-19 320.5.4 / 2015-11-19
27------------------ 33------------------
@@ -54,7 +60,7 @@
540.3.3 / 2015-11-17 600.3.3 / 2015-11-17
55------------------ 61------------------
56 62
57`fix` fix some bugs. 63`fixed` fix some bugs.
58 64
590.3.0 / 2015-11-17 650.3.0 / 2015-11-17
60------------------ 66------------------
diff --git a/README.md b/README.md
index 60e5ab0..98f913a 100644
--- a/README.md
+++ b/README.md
@@ -39,7 +39,6 @@ Usage
39 39
40``` 40```
41import TimePicker from 'rc-time-picker'; 41import TimePicker from 'rc-time-picker';
42import React from 'react';
43import ReactDOM from 'react-dom'; 42import ReactDOM from 'react-dom';
44ReactDOM.render(<TimePicker />, container); 43ReactDOM.render(<TimePicker />, container);
45``` 44```
@@ -49,25 +48,26 @@ API
49 48
50### TimePicker 49### TimePicker
51 50
52| Name | Type | Default | Description | 51| Name | Type | Default | Description |
53|----------------|----------------------------|-----------------------------------------------|--------------------------------------------------------------------------------------------| 52|-------------------------|-----------------------------------|-----------------------------------------------|--------------------------------------------------------------------------------------------|
54| prefixCls | String | | prefixCls of this component | 53| prefixCls | String | | prefixCls of this component |
55| locale | Object | import from 'rc-time-picker/lib/locale/en_US' | | 54| locale | Object | import from 'rc-time-picker/lib/locale/en_US' | |
56| disabled | Boolean | false | whether picker is disabled | 55| disabled | Boolean | false | whether picker is disabled |
57| open | Boolean | false | current open state of picker. controlled prop | 56| open | Boolean | false | current open state of picker. controlled prop |
58| defaultValue | GregorianCalendar | null | default initial value | 57| defaultValue | GregorianCalendar | null | default initial value |
59| value | GregorianCalendar | null | current value | 58| value | GregorianCalendar | null | current value |
60| gregorianCalendarLocale | GregorianCalendar locale object | null | if value and defaultValue not set, you should set this to your locale | 59| gregorianCalendarLocale | GregorianCalendar locale object | null | if value and defaultValue not set, you should set this to your locale |
61| placeholder | String | '' | time input's placeholder | 60| placeholder | String | '' | time input's placeholder |
62| showHour | Boolean | whether show hour | | 61| showHour | Boolean | whether show hour | |
63| showSecond | Boolean | whether show second | | 62| showSecond | Boolean | whether show second | |
64| formatter | String|GregorianCalendarFormatter | | | 63| formatter | String|GregorianCalendarFormatter | | |
65| hourOptions | Array<Number> | hour options | | 64| disabledHours | Array<Number> | disabled hour options | |
66| minuteOptions | Array<Number> | minute options | | 65| disabledMinutes | Array<Number> | disabled minute options | |
67| secondOptions | Array<Number> | second options | | 66| disabledSeconds | Array<Number> | disabled second options | |
68| onChange | Function | null | called when select a different value | 67| hideDisabledOptions | Boolean | whether hide disabled options | |
69| placement | String | bottomLeft | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] | 68| onChange | Function | null | called when select a different value |
70| transitionName | String | '' | | 69| placement | String | bottomLeft | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] |
70| transitionName | String | '' | |
71 71
72License 72License
73------- 73-------
diff --git a/assets/index/Select.less b/assets/index/Select.less
index 3e94c11..13b5b18 100644
--- a/assets/index/Select.less
+++ b/assets/index/Select.less
@@ -48,8 +48,16 @@
48 } 48 }
49 } 49 }
50 50
51 &-option-selected { 51 li&-option-selected {
52 background: #edfaff; 52 background: #edfaff;
53 color: #2db7f5; 53 color: #2db7f5;
54 } 54 }
55
56 li&-option-disabled {
57 color: #bfbfbf;
58 &:hover {
59 background: transparent;
60 cursor: not-allowed;
61 }
62 }
55} 63}
diff --git a/examples/pick-time.js b/examples/pick-time.js
index dd5a2ce..074e72c 100644
--- a/examples/pick-time.js
+++ b/examples/pick-time.js
@@ -24,11 +24,27 @@ function onChange(value) {
24 console.log(value && formatter.format(value)); 24 console.log(value && formatter.format(value));
25} 25}
26 26
27const options = {
28 disabledHours() {
29 return [0, 2, 21];
30 },
31 disabledMinutes(h) {
32 return h === 22 ? [0, 3, 31] : [];
33 },
34 disabledSeconds(h, m) {
35 return [];
36 },
37};
38
27ReactDom.render( 39ReactDom.render(
28 <TimePicker formatter={formatter} locale={TimePickerLocale} 40 <TimePicker formatter={formatter} locale={TimePickerLocale}
29 showSecond={showSecond} 41 showSecond={showSecond}
30 defaultValue={now} 42 defaultValue={now}
31 className="xxx" 43 className="xxx"
32 onChange={onChange}/>, 44 onChange={onChange}
45 disabledHours={[0, 2, 21]}
46 disabledMinutes={[0, 2, 21]}
47 disabledSeconds={[]}
48 hideDisabledOptions={true} />,
33 document.getElementById('__react-content') 49 document.getElementById('__react-content')
34); 50);
diff --git a/package.json b/package.json
index fa91d86..8bc0ae2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
1{ 1{
2 "name": "rc-time-picker", 2 "name": "rc-time-picker",
3 "version": "1.0.0-alpha6", 3 "version": "1.0.0-alpha7",
4 "description": "React TimePicker", 4 "description": "React TimePicker",
5 "keywords": [ 5 "keywords": [
6 "react", 6 "react",
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
index 3e331f1..fb855e2 100644
--- a/src/TimePicker.jsx
+++ b/src/TimePicker.jsx
@@ -34,9 +34,10 @@ const Picker = React.createClass({
34 style: PropTypes.object, 34 style: PropTypes.object,
35 className: PropTypes.string, 35 className: PropTypes.string,
36 showSecond: PropTypes.bool, 36 showSecond: PropTypes.bool,
37 hourOptions: PropTypes.array, 37 disabledHours: PropTypes.array,
38 minuteOptions: PropTypes.array, 38 disabledMinutes: PropTypes.array,
39 secondOptions: PropTypes.array, 39 disabledSeconds: PropTypes.array,
40 hideDisabledOptions: PropTypes.bool,
40 onChange: PropTypes.func, 41 onChange: PropTypes.func,
41 onOpen: PropTypes.func, 42 onOpen: PropTypes.func,
42 onClose: PropTypes.func, 43 onClose: PropTypes.func,
@@ -54,6 +55,10 @@ const Picker = React.createClass({
54 allowEmpty: true, 55 allowEmpty: true,
55 showHour: true, 56 showHour: true,
56 showSecond: true, 57 showSecond: true,
58 disabledHours: null,
59 disabledMinutes: null,
60 disabledSeconds: null,
61 hideDisabledOptions: false,
57 placement: 'bottomLeft', 62 placement: 'bottomLeft',
58 onChange: noop, 63 onChange: noop,
59 onOpen: noop, 64 onOpen: noop,
@@ -145,7 +150,7 @@ const Picker = React.createClass({
145 }, 150 },
146 151
147 getPanelElement() { 152 getPanelElement() {
148 const { prefixCls, defaultValue, locale, placeholder, hourOptions, minuteOptions, secondOptions, allowEmpty, showHour, showSecond, gregorianCalendarLocale, value } = this.props; 153 const { prefixCls, defaultValue, locale, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, gregorianCalendarLocale, value } = this.props;
149 let calendarLocale; 154 let calendarLocale;
150 if (value) { 155 if (value) {
151 calendarLocale = value.locale; 156 calendarLocale = value.locale;
@@ -170,9 +175,10 @@ const Picker = React.createClass({
170 allowEmpty={allowEmpty} 175 allowEmpty={allowEmpty}
171 formatter={this.getFormatter()} 176 formatter={this.getFormatter()}
172 placeholder={placeholder} 177 placeholder={placeholder}
173 hourOptions={hourOptions} 178 disabledHours={disabledHours}
174 minuteOptions={minuteOptions} 179 disabledMinutes={disabledMinutes}
175 secondOptions={secondOptions} 180 disabledSeconds={disabledSeconds}
181 hideDisabledOptions={hideDisabledOptions}
176 /> 182 />
177 ); 183 );
178 }, 184 },
diff --git a/src/module/Combobox.jsx b/src/module/Combobox.jsx
index a017ec9..27a8226 100644
--- a/src/module/Combobox.jsx
+++ b/src/module/Combobox.jsx
@@ -2,11 +2,21 @@ import React, {PropTypes} from 'react';
2import Select from './Select'; 2import Select from './Select';
3import GregorianCalendar from 'gregorian-calendar'; 3import GregorianCalendar from 'gregorian-calendar';
4 4
5const formatOption = (option) => { 5const formatOption = (option, disabledOptions) => {
6 let value = `${option}`;
6 if (option < 10) { 7 if (option < 10) {
7 return `0${option}`; 8 value = `0${option}`;
8 } 9 }
9 return `${option}`; 10
11 let disabled = false;
12 if (disabledOptions.indexOf(option) >= 0) {
13 disabled = true;
14 }
15
16 return {
17 value,
18 disabled,
19 };
10}; 20};
11 21
12const Combobox = React.createClass({ 22const Combobox = React.createClass({
@@ -21,6 +31,9 @@ const Combobox = React.createClass({
21 hourOptions: PropTypes.array, 31 hourOptions: PropTypes.array,
22 minuteOptions: PropTypes.array, 32 minuteOptions: PropTypes.array,
23 secondOptions: PropTypes.array, 33 secondOptions: PropTypes.array,
34 disabledHours: PropTypes.array,
35 disabledMinutes: PropTypes.array,
36 disabledSeconds: PropTypes.array,
24 onCurrentSelectPanelChange: PropTypes.func, 37 onCurrentSelectPanelChange: PropTypes.func,
25 }, 38 },
26 39
@@ -47,14 +60,14 @@ const Combobox = React.createClass({
47 }, 60 },
48 61
49 getHourSelect(hour) { 62 getHourSelect(hour) {
50 const { prefixCls, hourOptions, showHour } = this.props; 63 const { prefixCls, hourOptions, disabledHours, showHour } = this.props;
51 if (!showHour) { 64 if (!showHour) {
52 return null; 65 return null;
53 } 66 }
54 return ( 67 return (
55 <Select 68 <Select
56 prefixCls={prefixCls} 69 prefixCls={prefixCls}
57 options={hourOptions.map(option => formatOption(option))} 70 options={hourOptions.map(option => formatOption(option, disabledHours))}
58 selectedIndex={hourOptions.indexOf(hour)} 71 selectedIndex={hourOptions.indexOf(hour)}
59 type="hour" 72 type="hour"
60 onSelect={this.onItemChange} 73 onSelect={this.onItemChange}
@@ -64,11 +77,11 @@ const Combobox = React.createClass({
64 }, 77 },
65 78
66 getMinuteSelect(minute) { 79 getMinuteSelect(minute) {
67 const { prefixCls, minuteOptions } = this.props; 80 const { prefixCls, minuteOptions, disabledMinutes } = this.props;
68 return ( 81 return (
69 <Select 82 <Select
70 prefixCls={prefixCls} 83 prefixCls={prefixCls}
71 options={minuteOptions.map(option => formatOption(option))} 84 options={minuteOptions.map(option => formatOption(option, disabledMinutes))}
72 selectedIndex={minuteOptions.indexOf(minute)} 85 selectedIndex={minuteOptions.indexOf(minute)}
73 type="minute" 86 type="minute"
74 onSelect={this.onItemChange} 87 onSelect={this.onItemChange}
@@ -78,14 +91,14 @@ const Combobox = React.createClass({
78 }, 91 },
79 92
80 getSecondSelect(second) { 93 getSecondSelect(second) {
81 const { prefixCls, secondOptions, showSecond } = this.props; 94 const { prefixCls, secondOptions, disabledSeconds, showSecond } = this.props;
82 if (!showSecond) { 95 if (!showSecond) {
83 return null; 96 return null;
84 } 97 }
85 return ( 98 return (
86 <Select 99 <Select
87 prefixCls={prefixCls} 100 prefixCls={prefixCls}
88 options={secondOptions.map(option => formatOption(option))} 101 options={secondOptions.map(option => formatOption(option, disabledSeconds))}
89 selectedIndex={secondOptions.indexOf(second)} 102 selectedIndex={secondOptions.indexOf(second)}
90 type="second" 103 type="second"
91 onSelect={this.onItemChange} 104 onSelect={this.onItemChange}
diff --git a/src/module/Header.jsx b/src/module/Header.jsx
index ef88948..c2f8eef 100644
--- a/src/module/Header.jsx
+++ b/src/module/Header.jsx
@@ -13,6 +13,9 @@ const Header = React.createClass({
13 hourOptions: PropTypes.array, 13 hourOptions: PropTypes.array,
14 minuteOptions: PropTypes.array, 14 minuteOptions: PropTypes.array,
15 secondOptions: PropTypes.array, 15 secondOptions: PropTypes.array,
16 disabledHours: PropTypes.array,
17 disabledMinutes: PropTypes.array,
18 disabledSeconds: PropTypes.array,
16 onChange: PropTypes.func, 19 onChange: PropTypes.func,
17 onClear: PropTypes.func, 20 onClear: PropTypes.func,
18 onEsc: PropTypes.func, 21 onEsc: PropTypes.func,
@@ -54,7 +57,7 @@ const Header = React.createClass({
54 str, 57 str,
55 }); 58 });
56 let value = null; 59 let value = null;
57 const {formatter, gregorianCalendarLocale, hourOptions, minuteOptions, secondOptions, onChange, allowEmpty} = this.props; 60 const {formatter, gregorianCalendarLocale, hourOptions, minuteOptions, secondOptions, disabledHours, disabledMinutes, disabledSeconds, onChange, allowEmpty} = this.props;
58 61
59 if (str) { 62 if (str) {
60 const originalValue = this.props.value; 63 const originalValue = this.props.value;
@@ -71,6 +74,7 @@ const Header = React.createClass({
71 } 74 }
72 75
73 if (value) { 76 if (value) {
77 // if time value not allowed, response warning.
74 if ( 78 if (
75 hourOptions.indexOf(value.getHourOfDay()) < 0 || 79 hourOptions.indexOf(value.getHourOfDay()) < 0 ||
76 minuteOptions.indexOf(value.getMinutes()) < 0 || 80 minuteOptions.indexOf(value.getMinutes()) < 0 ||
@@ -82,6 +86,18 @@ const Header = React.createClass({
82 return; 86 return;
83 } 87 }
84 88
89 // if time value is disabled, response warning.
90 if (
91 disabledHours.indexOf(value.getHourOfDay()) >= 0 ||
92 disabledMinutes.indexOf(value.getMinutes()) >= 0 ||
93 disabledSeconds.indexOf(value.getSeconds()) >= 0
94 ) {
95 this.setState({
96 invalid: true,
97 });
98 return;
99 }
100
85 if (originalValue && value) { 101 if (originalValue && value) {
86 if ( 102 if (
87 originalValue.getHourOfDay() !== value.getHourOfDay() || 103 originalValue.getHourOfDay() !== value.getHourOfDay() ||
diff --git a/src/module/Panel.jsx b/src/module/Panel.jsx
index 63823ee..72934e5 100644
--- a/src/module/Panel.jsx
+++ b/src/module/Panel.jsx
@@ -6,10 +6,12 @@ import Combobox from './Combobox';
6function noop() { 6function noop() {
7} 7}
8 8
9function generateOptions(length) { 9function generateOptions(length, disabledOptions, hideDisabledOptions) {
10 const arr = []; 10 const arr = [];
11 for (let i = 0; i < length; i++) { 11 for (let value = 0; value < length; value++) {
12 arr.push(i); 12 if ((disabledOptions && disabledOptions.indexOf(value) < 0) || !hideDisabledOptions) {
13 arr.push(value);
14 }
13 } 15 }
14 return arr; 16 return arr;
15} 17}
@@ -22,9 +24,10 @@ const Panel = React.createClass({
22 placeholder: PropTypes.string, 24 placeholder: PropTypes.string,
23 gregorianCalendarLocale: PropTypes.object, 25 gregorianCalendarLocale: PropTypes.object,
24 formatter: PropTypes.object, 26 formatter: PropTypes.object,
25 hourOptions: PropTypes.array, 27 disabledHours: PropTypes.array,
26 minuteOptions: PropTypes.array, 28 disabledMinutes: PropTypes.array,
27 secondOptions: PropTypes.array, 29 disabledSeconds: PropTypes.array,
30 hideDisabledOptions: PropTypes.bool,
28 onChange: PropTypes.func, 31 onChange: PropTypes.func,
29 onEsc: PropTypes.func, 32 onEsc: PropTypes.func,
30 allowEmpty: PropTypes.bool, 33 allowEmpty: PropTypes.bool,
@@ -37,9 +40,10 @@ const Panel = React.createClass({
37 40
38 getDefaultProps() { 41 getDefaultProps() {
39 return { 42 return {
40 hourOptions: generateOptions(24), 43 disabledHours: null,
41 minuteOptions: generateOptions(60), 44 disabledMinutes: null,
42 secondOptions: generateOptions(60), 45 disabledSeconds: null,
46 hideDisabledOptions: false,
43 onChange: noop, 47 onChange: noop,
44 onClear: noop, 48 onClear: noop,
45 }; 49 };
@@ -75,8 +79,12 @@ const Panel = React.createClass({
75 }, 79 },
76 80
77 render() { 81 render() {
78 const { locale, prefixCls, placeholder, hourOptions, minuteOptions, secondOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props; 82 const { locale, prefixCls, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props;
79 const value = this.state.value; 83 const value = this.state.value;
84 const hourOptions = generateOptions(24, disabledHours, hideDisabledOptions);
85 const minuteOptions = generateOptions(60, disabledMinutes, hideDisabledOptions);
86 const secondOptions = generateOptions(60, disabledSeconds, hideDisabledOptions);
87
80 return ( 88 return (
81 <div className={`${prefixCls}-inner`}> 89 <div className={`${prefixCls}-inner`}>
82 <Header 90 <Header
@@ -91,6 +99,9 @@ const Panel = React.createClass({
91 hourOptions={hourOptions} 99 hourOptions={hourOptions}
92 minuteOptions={minuteOptions} 100 minuteOptions={minuteOptions}
93 secondOptions={secondOptions} 101 secondOptions={secondOptions}
102 disabledHours={disabledHours}
103 disabledMinutes={disabledMinutes}
104 disabledSeconds={disabledSeconds}
94 onChange={this.onChange} 105 onChange={this.onChange}
95 onClear={this.onClear} 106 onClear={this.onClear}
96 allowEmpty={allowEmpty} 107 allowEmpty={allowEmpty}
@@ -106,6 +117,9 @@ const Panel = React.createClass({
106 hourOptions={hourOptions} 117 hourOptions={hourOptions}
107 minuteOptions={minuteOptions} 118 minuteOptions={minuteOptions}
108 secondOptions={secondOptions} 119 secondOptions={secondOptions}
120 disabledHours={disabledHours}
121 disabledMinutes={disabledMinutes}
122 disabledSeconds={disabledSeconds}
109 onCurrentSelectPanelChange={this.onCurrentSelectPanelChange} 123 onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
110 /> 124 />
111 </div> 125 </div>
diff --git a/src/module/Select.jsx b/src/module/Select.jsx
index 3659692..ab10789 100644
--- a/src/module/Select.jsx
+++ b/src/module/Select.jsx
@@ -51,11 +51,15 @@ const Select = React.createClass({
51 getOptions() { 51 getOptions() {
52 const { options, selectedIndex, prefixCls } = this.props; 52 const { options, selectedIndex, prefixCls } = this.props;
53 return options.map((item, index) => { 53 return options.map((item, index) => {
54 const selected = selectedIndex === index;
55 const cls = classnames({ 54 const cls = classnames({
56 [`${prefixCls}-select-option-selected`]: selected, 55 [`${prefixCls}-select-option-selected`]: selectedIndex === index,
56 [`${prefixCls}-select-option-disabled`]: item.disabled,
57 }); 57 });
58 return <li className={cls} key={index} onClick={this.onSelect.bind(this, +item)}>{item}</li>; 58 let onclick = null;
59 if (!item.disabled) {
60 onclick = this.onSelect.bind(this, +item.value);
61 }
62 return <li className={cls} key={index} onClick={onclick} disabled={item.disabled}>{item.value}</li>;
59 }); 63 });
60 }, 64 },
61 65
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-21 14:26:46 +0000