diff options
Diffstat (limited to 'examples')
-rw-r--r-- | examples/disabled.html | 1 | ||||
-rw-r--r-- | examples/disabled.js | 66 | ||||
-rw-r--r-- | examples/hidden.html | 1 | ||||
-rw-r--r-- | examples/hidden.js | 37 | ||||
-rw-r--r-- | examples/pick-time.js | 2 |
5 files changed, 106 insertions, 1 deletions
diff --git a/examples/disabled.html b/examples/disabled.html new file mode 100644 index 0000000..48cdce8 --- /dev/null +++ b/examples/disabled.html | |||
@@ -0,0 +1 @@ | |||
placeholder | |||
diff --git a/examples/disabled.js b/examples/disabled.js new file mode 100644 index 0000000..633b8db --- /dev/null +++ b/examples/disabled.js | |||
@@ -0,0 +1,66 @@ | |||
1 | /* eslint no-console:0 */ | ||
2 | |||
3 | import 'rc-time-picker/assets/index.less'; | ||
4 | |||
5 | import React from 'react'; | ||
6 | import ReactDom from 'react-dom'; | ||
7 | |||
8 | import GregorianCalendar from 'gregorian-calendar'; | ||
9 | import DateTimeFormat from 'gregorian-calendar-format'; | ||
10 | import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; | ||
11 | |||
12 | import TimePicker from 'rc-time-picker'; | ||
13 | import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN'; | ||
14 | |||
15 | const showSecond = true; | ||
16 | const str = showSecond ? 'HH:mm:ss' : 'HH:mm'; | ||
17 | |||
18 | const formatter = new DateTimeFormat(str); | ||
19 | |||
20 | const now = new GregorianCalendar(zhCn); | ||
21 | now.setTime(Date.now()); | ||
22 | |||
23 | function generateOptions(length, excludedOptions) { | ||
24 | const arr = []; | ||
25 | for (let value = 0; value < length; value++) { | ||
26 | if (excludedOptions.indexOf(value) < 0) { | ||
27 | arr.push(value); | ||
28 | } | ||
29 | } | ||
30 | return arr; | ||
31 | } | ||
32 | |||
33 | function onChange(value) { | ||
34 | console.log(value && formatter.format(value)); | ||
35 | } | ||
36 | |||
37 | function disabledHours() { | ||
38 | return [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]; | ||
39 | } | ||
40 | |||
41 | function disabledMinutes(h) { | ||
42 | switch (h) { | ||
43 | case 9: | ||
44 | return generateOptions(60, [30]); | ||
45 | case 21: | ||
46 | return generateOptions(60, [0]); | ||
47 | default: | ||
48 | return generateOptions(60, [0, 30]); | ||
49 | } | ||
50 | } | ||
51 | |||
52 | function disabledSeconds(h, m) { | ||
53 | return [h + m % 60]; | ||
54 | } | ||
55 | |||
56 | ReactDom.render( | ||
57 | <TimePicker formatter={formatter} locale={TimePickerLocale} | ||
58 | showSecond={showSecond} | ||
59 | defaultValue={now} | ||
60 | className="xxx" | ||
61 | onChange={onChange} | ||
62 | disabledHours={disabledHours} | ||
63 | disabledMinutes={disabledMinutes} | ||
64 | disabledSeconds={disabledSeconds} />, | ||
65 | document.getElementById('__react-content') | ||
66 | ); | ||
diff --git a/examples/hidden.html b/examples/hidden.html new file mode 100644 index 0000000..48cdce8 --- /dev/null +++ b/examples/hidden.html | |||
@@ -0,0 +1 @@ | |||
placeholder | |||
diff --git a/examples/hidden.js b/examples/hidden.js new file mode 100644 index 0000000..da366cc --- /dev/null +++ b/examples/hidden.js | |||
@@ -0,0 +1,37 @@ | |||
1 | /* eslint no-console:0 */ | ||
2 | |||
3 | import 'rc-time-picker/assets/index.less'; | ||
4 | |||
5 | import React from 'react'; | ||
6 | import ReactDom from 'react-dom'; | ||
7 | |||
8 | import GregorianCalendar from 'gregorian-calendar'; | ||
9 | import DateTimeFormat from 'gregorian-calendar-format'; | ||
10 | import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; | ||
11 | |||
12 | import TimePicker from 'rc-time-picker'; | ||
13 | import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN'; | ||
14 | |||
15 | const showSecond = true; | ||
16 | const str = showSecond ? 'HH:mm:ss' : 'HH:mm'; | ||
17 | |||
18 | const formatter = new DateTimeFormat(str); | ||
19 | |||
20 | const now = new GregorianCalendar(zhCn); | ||
21 | now.setTime(Date.now()); | ||
22 | |||
23 | function onChange(value) { | ||
24 | console.log(value && formatter.format(value)); | ||
25 | } | ||
26 | |||
27 | ReactDom.render( | ||
28 | <TimePicker formatter={formatter} locale={TimePickerLocale} | ||
29 | showSecond={showSecond} | ||
30 | defaultValue={now} | ||
31 | className="xxx" | ||
32 | onChange={onChange} | ||
33 | disabledHours={() => [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]} | ||
34 | disabledMinutes={() => [0, 2, 4, 6, 8]} | ||
35 | hideDisabledOptions />, | ||
36 | document.getElementById('__react-content') | ||
37 | ); | ||
diff --git a/examples/pick-time.js b/examples/pick-time.js index dd5a2ce..f66e416 100644 --- a/examples/pick-time.js +++ b/examples/pick-time.js | |||
@@ -29,6 +29,6 @@ ReactDom.render( | |||
29 | showSecond={showSecond} | 29 | showSecond={showSecond} |
30 | defaultValue={now} | 30 | defaultValue={now} |
31 | className="xxx" | 31 | className="xxx" |
32 | onChange={onChange}/>, | 32 | onChange={onChange} />, |
33 | document.getElementById('__react-content') | 33 | document.getElementById('__react-content') |
34 | ); | 34 | ); |