diff options
author | 崖鹰 <zhao.wuz@alipay.com> | 2015-11-13 11:33:48 +0800 |
---|---|---|
committer | 崖鹰 <zhao.wuz@alipay.com> | 2015-11-13 11:33:48 +0800 |
commit | 02de449a0474765a4796fa607e7e3922252f574f (patch) | |
tree | dc37faf2f610343112ea1fc3707ad188092bd031 /examples | |
parent | 1f336fabc9135ac971e53d9c2ae407db69b8f096 (diff) | |
download | time-picker-02de449a0474765a4796fa607e7e3922252f574f.tar.gz time-picker-02de449a0474765a4796fa607e7e3922252f574f.tar.zst time-picker-02de449a0474765a4796fa607e7e3922252f574f.zip |
release 0.1.0
Diffstat (limited to 'examples')
-rw-r--r-- | examples/pick-time.jsx | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/examples/pick-time.jsx b/examples/pick-time.jsx new file mode 100644 index 0000000..33c5d07 --- /dev/null +++ b/examples/pick-time.jsx | |||
@@ -0,0 +1,36 @@ | |||
1 | import '../component/timepicker/assets/index.less'; | ||
2 | |||
3 | import React from 'react'; | ||
4 | import ReactDom from 'react-dom'; | ||
5 | import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; | ||
6 | import GregorianCalendar from 'gregorian-calendar'; | ||
7 | |||
8 | import TimePicker from '../component/timepicker/src/Picker'; | ||
9 | import TimePanel from '../component/timepicker/src/TimePanel'; | ||
10 | import TimepickerLocale from '../component/timepicker/src/locale/zh_CN'; | ||
11 | import DateTimeFormat from 'gregorian-calendar-format'; | ||
12 | |||
13 | const formatter = new DateTimeFormat('HH:mm:ss'); | ||
14 | |||
15 | const now = new GregorianCalendar(zhCn); | ||
16 | now.setTime(Date.now()); | ||
17 | |||
18 | const timePanel = ( | ||
19 | <TimePanel | ||
20 | defaultValue={now} | ||
21 | locale={TimepickerLocale} | ||
22 | formatter={formatter} | ||
23 | minuteOptions={[0, 30]} | ||
24 | /> | ||
25 | ); | ||
26 | |||
27 | ReactDom.render( | ||
28 | <TimePicker panel={timePanel} value={now}> | ||
29 | { | ||
30 | ({value}) => { | ||
31 | return <input type="text" placeholder="请选择时间" readOnly value={value && formatter.format(value)} />; | ||
32 | } | ||
33 | } | ||
34 | </TimePicker>, | ||
35 | document.getElementById('react-content') | ||
36 | ); | ||