aboutsummaryrefslogtreecommitdiffhomepage
path: root/examples
diff options
context:
space:
mode:
authoryiminghe <yiminghe@gmail.com>2016-08-04 19:53:55 +0800
committeryiminghe <yiminghe@gmail.com>2016-08-04 19:53:55 +0800
commit4984ed85e54f442998a335db70618d6184fa397e (patch)
tree6ae348b2cac5f48f3afb6f7b8dd0c2fd02f044fc /examples
parentdeaa6062ea2e274d50d58c70251c1237c0c03c67 (diff)
downloadtime-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.js28
-rw-r--r--examples/hidden.js30
-rw-r--r--examples/pick-time.js23
-rw-r--r--examples/value-and-defaultValue.js27
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';
5import React from 'react'; 5import React from 'react';
6import ReactDom from 'react-dom'; 6import ReactDom from 'react-dom';
7 7
8import GregorianCalendar from 'gregorian-calendar'; 8import moment from 'moment';
9import DateTimeFormat from 'gregorian-calendar-format';
10 9
11import TimePicker from 'rc-time-picker'; 10import TimePicker from 'rc-time-picker';
12import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN';
13 11
14const showSecond = true; 12const showSecond = true;
15const str = showSecond ? 'HH:mm:ss' : 'HH:mm'; 13const str = showSecond ? 'HH:mm:ss' : 'HH:mm';
16 14
17const formatter = new DateTimeFormat(str); 15const now = moment().hour(14).minute(30);
18
19const now = new GregorianCalendar(TimePickerLocale.calendar);
20now.setTime(Date.now());
21 16
22function generateOptions(length, excludedOptions) { 17function generateOptions(length, excludedOptions) {
23 const arr = []; 18 const arr = [];
@@ -30,7 +25,7 @@ function generateOptions(length, excludedOptions) {
30} 25}
31 26
32function onChange(value) { 27function onChange(value) {
33 console.log(value && formatter.format(value)); 28 console.log(value && value.format(str));
34} 29}
35 30
36function disabledHours() { 31function disabledHours() {
@@ -53,13 +48,14 @@ function disabledSeconds(h, m) {
53} 48}
54 49
55ReactDom.render( 50ReactDom.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';
5import React from 'react'; 5import React from 'react';
6import ReactDom from 'react-dom'; 6import ReactDom from 'react-dom';
7 7
8import GregorianCalendar from 'gregorian-calendar'; 8import moment from 'moment';
9import DateTimeFormat from 'gregorian-calendar-format';
10 9
11import TimePicker from 'rc-time-picker'; 10import TimePicker from 'rc-time-picker';
12import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN';
13 11
14const showSecond = true; 12const showSecond = true;
15const str = showSecond ? 'HH:mm:ss' : 'HH:mm'; 13const str = showSecond ? 'HH:mm:ss' : 'HH:mm';
16 14
17const formatter = new DateTimeFormat(str);
18
19const now = new GregorianCalendar(TimePickerLocale.calendar);
20now.setTime(Date.now());
21
22function onChange(value) { 15function onChange(value) {
23 console.log(value && formatter.format(value)); 16 console.log(value && value.format(str));
24} 17}
25 18
26ReactDom.render( 19ReactDom.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';
5import React from 'react'; 5import React from 'react';
6import ReactDom from 'react-dom'; 6import ReactDom from 'react-dom';
7 7
8import GregorianCalendar from 'gregorian-calendar'; 8import moment from 'moment';
9import DateTimeFormat from 'gregorian-calendar-format';
10 9
11import TimePicker from 'rc-time-picker'; 10import TimePicker from 'rc-time-picker';
12import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN';
13 11
14const showSecond = true; 12const showSecond = true;
15const str = showSecond ? 'HH:mm:ss' : 'HH:mm'; 13const str = showSecond ? 'HH:mm:ss' : 'HH:mm';
16 14
17const formatter = new DateTimeFormat(str);
18
19const now = new GregorianCalendar(TimePickerLocale.calendar);
20now.setTime(Date.now());
21 15
22function onChange(value) { 16function onChange(value) {
23 console.log(value && formatter.format(value)); 17 console.log(value && value.format(str));
24} 18}
25 19
26ReactDom.render( 20ReactDom.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
5import React from 'react'; 5import React from 'react';
6import ReactDom from 'react-dom'; 6import ReactDom from 'react-dom';
7 7import moment from 'moment';
8import GregorianCalendar from 'gregorian-calendar';
9import DateTimeFormat from 'gregorian-calendar-format';
10import TimePicker from 'rc-time-picker'; 8import TimePicker from 'rc-time-picker';
11import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN';
12
13const formatter = new DateTimeFormat('HH:mm:ss');
14
15const now = new GregorianCalendar(TimePickerLocale.calendar);
16now.setTime(Date.now());
17 9
18const App = React.createClass({ 10const 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 );