diff options
author | MG12 <wuzhao.mail@gmail.com> | 2015-11-16 14:44:26 +0800 |
---|---|---|
committer | MG12 <wuzhao.mail@gmail.com> | 2015-11-16 14:44:26 +0800 |
commit | 78637ac02ce6a469d2021736d3cb12e98c5edbe7 (patch) | |
tree | 68de02afaa15b90be1fcc1dd191edb6f48ebb293 /examples/pick-time.js | |
parent | 02de449a0474765a4796fa607e7e3922252f574f (diff) | |
download | time-picker-78637ac02ce6a469d2021736d3cb12e98c5edbe7.tar.gz time-picker-78637ac02ce6a469d2021736d3cb12e98c5edbe7.tar.zst time-picker-78637ac02ce6a469d2021736d3cb12e98c5edbe7.zip |
remove toggle feature because rc-trigger included; update example and document0.2.0
Diffstat (limited to 'examples/pick-time.js')
-rw-r--r-- | examples/pick-time.js | 37 |
1 files changed, 37 insertions, 0 deletions
diff --git a/examples/pick-time.js b/examples/pick-time.js new file mode 100644 index 0000000..8c6b826 --- /dev/null +++ b/examples/pick-time.js | |||
@@ -0,0 +1,37 @@ | |||
1 | import 'rc-time-picker/assets/index.less'; | ||
2 | |||
3 | import React from 'react'; | ||
4 | import ReactDom from 'react-dom'; | ||
5 | |||
6 | import GregorianCalendar from 'gregorian-calendar'; | ||
7 | import DateTimeFormat from 'gregorian-calendar-format'; | ||
8 | import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; | ||
9 | |||
10 | import TimePicker from 'rc-time-picker/src/TimePicker'; | ||
11 | import TimePanel from 'rc-time-picker/src/TimePanel'; | ||
12 | import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN'; | ||
13 | |||
14 | const formatter = new DateTimeFormat('HH:mm:ss'); | ||
15 | |||
16 | const now = new GregorianCalendar(zhCn); | ||
17 | now.setTime(Date.now()); | ||
18 | |||
19 | const timePanel = ( | ||
20 | <TimePanel | ||
21 | defaultValue={now} | ||
22 | locale={TimePickerLocale} | ||
23 | formatter={formatter} | ||
24 | minuteOptions={[0, 30]} | ||
25 | /> | ||
26 | ); | ||
27 | |||
28 | ReactDom.render( | ||
29 | <TimePicker panel={timePanel} value={now}> | ||
30 | { | ||
31 | ({value}) => { | ||
32 | return <input type="text" placeholder="请选择时间" readOnly value={value && formatter.format(value)} />; | ||
33 | } | ||
34 | } | ||
35 | </TimePicker>, | ||
36 | document.getElementById('__react-content') | ||
37 | ); | ||