diff options
author | yiminghe <yiminghe@gmail.com> | 2016-08-04 19:53:55 +0800 |
---|---|---|
committer | yiminghe <yiminghe@gmail.com> | 2016-08-04 19:53:55 +0800 |
commit | 4984ed85e54f442998a335db70618d6184fa397e (patch) | |
tree | 6ae348b2cac5f48f3afb6f7b8dd0c2fd02f044fc /examples | |
parent | deaa6062ea2e274d50d58c70251c1237c0c03c67 (diff) | |
download | time-picker-4984ed85e54f442998a335db70618d6184fa397e.tar.gz time-picker-4984ed85e54f442998a335db70618d6184fa397e.tar.zst time-picker-4984ed85e54f442998a335db70618d6184fa397e.zip |
2.x :boom:2.0.0
Diffstat (limited to 'examples')
-rw-r--r-- | examples/disabled.js | 28 | ||||
-rw-r--r-- | examples/hidden.js | 30 | ||||
-rw-r--r-- | examples/pick-time.js | 23 | ||||
-rw-r--r-- | examples/value-and-defaultValue.js | 27 |
4 files changed, 45 insertions, 63 deletions
diff --git a/examples/disabled.js b/examples/disabled.js index b650448..9d74002 100644 --- a/examples/disabled.js +++ b/examples/disabled.js | |||
@@ -5,19 +5,14 @@ import 'rc-time-picker/assets/index.less'; | |||
5 | import React from 'react'; | 5 | import React from 'react'; |
6 | import ReactDom from 'react-dom'; | 6 | import ReactDom from 'react-dom'; |
7 | 7 | ||
8 | import GregorianCalendar from 'gregorian-calendar'; | 8 | import moment from 'moment'; |
9 | import DateTimeFormat from 'gregorian-calendar-format'; | ||
10 | 9 | ||
11 | import TimePicker from 'rc-time-picker'; | 10 | import TimePicker from 'rc-time-picker'; |
12 | import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN'; | ||
13 | 11 | ||
14 | const showSecond = true; | 12 | const showSecond = true; |
15 | const str = showSecond ? 'HH:mm:ss' : 'HH:mm'; | 13 | const str = showSecond ? 'HH:mm:ss' : 'HH:mm'; |
16 | 14 | ||
17 | const formatter = new DateTimeFormat(str); | 15 | const now = moment().hour(14).minute(30); |
18 | |||
19 | const now = new GregorianCalendar(TimePickerLocale.calendar); | ||
20 | now.setTime(Date.now()); | ||
21 | 16 | ||
22 | function generateOptions(length, excludedOptions) { | 17 | function generateOptions(length, excludedOptions) { |
23 | const arr = []; | 18 | const arr = []; |
@@ -30,7 +25,7 @@ function generateOptions(length, excludedOptions) { | |||
30 | } | 25 | } |
31 | 26 | ||
32 | function onChange(value) { | 27 | function onChange(value) { |
33 | console.log(value && formatter.format(value)); | 28 | console.log(value && value.format(str)); |
34 | } | 29 | } |
35 | 30 | ||
36 | function disabledHours() { | 31 | function disabledHours() { |
@@ -53,13 +48,14 @@ function disabledSeconds(h, m) { | |||
53 | } | 48 | } |
54 | 49 | ||
55 | ReactDom.render( | 50 | ReactDom.render( |
56 | <TimePicker formatter={formatter} locale={TimePickerLocale} | 51 | <TimePicker |
57 | showSecond={showSecond} | 52 | showSecond={showSecond} |
58 | defaultValue={now} | 53 | defaultValue={now} |
59 | className="xxx" | 54 | className="xxx" |
60 | onChange={onChange} | 55 | onChange={onChange} |
61 | disabledHours={disabledHours} | 56 | disabledHours={disabledHours} |
62 | disabledMinutes={disabledMinutes} | 57 | disabledMinutes={disabledMinutes} |
63 | disabledSeconds={disabledSeconds}/>, | 58 | disabledSeconds={disabledSeconds} |
59 | />, | ||
64 | document.getElementById('__react-content') | 60 | document.getElementById('__react-content') |
65 | ); | 61 | ); |
diff --git a/examples/hidden.js b/examples/hidden.js index 16abd2a..90a20d2 100644 --- a/examples/hidden.js +++ b/examples/hidden.js | |||
@@ -5,32 +5,28 @@ import 'rc-time-picker/assets/index.less'; | |||
5 | import React from 'react'; | 5 | import React from 'react'; |
6 | import ReactDom from 'react-dom'; | 6 | import ReactDom from 'react-dom'; |
7 | 7 | ||
8 | import GregorianCalendar from 'gregorian-calendar'; | 8 | import moment from 'moment'; |
9 | import DateTimeFormat from 'gregorian-calendar-format'; | ||
10 | 9 | ||
11 | import TimePicker from 'rc-time-picker'; | 10 | import TimePicker from 'rc-time-picker'; |
12 | import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN'; | ||
13 | 11 | ||
14 | const showSecond = true; | 12 | const showSecond = true; |
15 | const str = showSecond ? 'HH:mm:ss' : 'HH:mm'; | 13 | const str = showSecond ? 'HH:mm:ss' : 'HH:mm'; |
16 | 14 | ||
17 | const formatter = new DateTimeFormat(str); | ||
18 | |||
19 | const now = new GregorianCalendar(TimePickerLocale.calendar); | ||
20 | now.setTime(Date.now()); | ||
21 | |||
22 | function onChange(value) { | 15 | function onChange(value) { |
23 | console.log(value && formatter.format(value)); | 16 | console.log(value && value.format(str)); |
24 | } | 17 | } |
25 | 18 | ||
26 | ReactDom.render( | 19 | ReactDom.render( |
27 | <TimePicker formatter={formatter} locale={TimePickerLocale} | 20 | <TimePicker |
28 | showSecond={showSecond} | 21 | format={str} |
29 | defaultValue={now} | 22 | showSecond={showSecond} |
30 | className="xxx" | 23 | // use to control utfOffset, locale, default open value |
31 | onChange={onChange} | 24 | defaultOpenValue={moment()} |
32 | disabledHours={() => [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]} | 25 | className="xxx" |
33 | disabledMinutes={() => [0, 2, 4, 6, 8]} | 26 | onChange={onChange} |
34 | hideDisabledOptions />, | 27 | disabledHours={() => [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]} |
28 | disabledMinutes={() => [0, 2, 4, 6, 8]} | ||
29 | hideDisabledOptions | ||
30 | />, | ||
35 | document.getElementById('__react-content') | 31 | document.getElementById('__react-content') |
36 | ); | 32 | ); |
diff --git a/examples/pick-time.js b/examples/pick-time.js index 8fa7831..835e1e1 100644 --- a/examples/pick-time.js +++ b/examples/pick-time.js | |||
@@ -5,30 +5,25 @@ import 'rc-time-picker/assets/index.less'; | |||
5 | import React from 'react'; | 5 | import React from 'react'; |
6 | import ReactDom from 'react-dom'; | 6 | import ReactDom from 'react-dom'; |
7 | 7 | ||
8 | import GregorianCalendar from 'gregorian-calendar'; | 8 | import moment from 'moment'; |
9 | import DateTimeFormat from 'gregorian-calendar-format'; | ||
10 | 9 | ||
11 | import TimePicker from 'rc-time-picker'; | 10 | import TimePicker from 'rc-time-picker'; |
12 | import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN'; | ||
13 | 11 | ||
14 | const showSecond = true; | 12 | const showSecond = true; |
15 | const str = showSecond ? 'HH:mm:ss' : 'HH:mm'; | 13 | const str = showSecond ? 'HH:mm:ss' : 'HH:mm'; |
16 | 14 | ||
17 | const formatter = new DateTimeFormat(str); | ||
18 | |||
19 | const now = new GregorianCalendar(TimePickerLocale.calendar); | ||
20 | now.setTime(Date.now()); | ||
21 | 15 | ||
22 | function onChange(value) { | 16 | function onChange(value) { |
23 | console.log(value && formatter.format(value)); | 17 | console.log(value && value.format(str)); |
24 | } | 18 | } |
25 | 19 | ||
26 | ReactDom.render( | 20 | ReactDom.render( |
27 | <TimePicker formatter={formatter} locale={TimePickerLocale} | 21 | <TimePicker |
28 | style={{width: 100}} | 22 | style={{ width: 100 }} |
29 | showSecond={showSecond} | 23 | showSecond={showSecond} |
30 | defaultValue={now} | 24 | defaultValue={moment()} |
31 | className="xxx" | 25 | className="xxx" |
32 | onChange={onChange} />, | 26 | onChange={onChange} |
27 | />, | ||
33 | document.getElementById('__react-content') | 28 | document.getElementById('__react-content') |
34 | ); | 29 | ); |
diff --git a/examples/value-and-defaultValue.js b/examples/value-and-defaultValue.js index 1be30cc..0e1aa14 100644 --- a/examples/value-and-defaultValue.js +++ b/examples/value-and-defaultValue.js | |||
@@ -4,25 +4,17 @@ import 'rc-time-picker/assets/index.less'; | |||
4 | 4 | ||
5 | import React from 'react'; | 5 | import React from 'react'; |
6 | import ReactDom from 'react-dom'; | 6 | import ReactDom from 'react-dom'; |
7 | 7 | import moment from 'moment'; | |
8 | import GregorianCalendar from 'gregorian-calendar'; | ||
9 | import DateTimeFormat from 'gregorian-calendar-format'; | ||
10 | import TimePicker from 'rc-time-picker'; | 8 | import TimePicker from 'rc-time-picker'; |
11 | import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN'; | ||
12 | |||
13 | const formatter = new DateTimeFormat('HH:mm:ss'); | ||
14 | |||
15 | const now = new GregorianCalendar(TimePickerLocale.calendar); | ||
16 | now.setTime(Date.now()); | ||
17 | 9 | ||
18 | const App = React.createClass({ | 10 | const App = React.createClass({ |
19 | getInitialState() { | 11 | getInitialState() { |
20 | return { | 12 | return { |
21 | value: now, | 13 | value: moment(), |
22 | }; | 14 | }; |
23 | }, | 15 | }, |
24 | handleValueChange(value) { | 16 | handleValueChange(value) { |
25 | console.log(value && formatter.format(value)); | 17 | console.log(value && value.format('HH:mm:ss')); |
26 | this.setState({ value }); | 18 | this.setState({ value }); |
27 | }, | 19 | }, |
28 | clear() { | 20 | clear() { |
@@ -33,11 +25,14 @@ const App = React.createClass({ | |||
33 | render() { | 25 | render() { |
34 | return ( | 26 | return ( |
35 | <div> | 27 | <div> |
36 | <TimePicker formatter={formatter} locale={TimePickerLocale} | 28 | <TimePicker |
37 | defaultValue={now} /> | 29 | defaultValue={this.state.value} |
38 | <TimePicker formatter={formatter} locale={TimePickerLocale} | 30 | onChange={this.handleValueChange} |
39 | value={this.state.value} | 31 | /> |
40 | onChange={this.handleValueChange}/> | 32 | <TimePicker |
33 | value={this.state.value} | ||
34 | onChange={this.handleValueChange} | ||
35 | /> | ||
41 | <button onClick={this.clear}>clear</button> | 36 | <button onClick={this.clear}>clear</button> |
42 | </div> | 37 | </div> |
43 | ); | 38 | ); |