]>
Commit | Line | Data |
---|---|---|
d3606149 | 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'; | |
d3606149 | 10 | 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 | ||
6fc4e0e8 | 15 | const now = new GregorianCalendar(TimePickerLocale.calendar); |
d3606149 | 16 | now.setTime(Date.now()); |
17 | ||
18 | const App = React.createClass({ | |
19 | getInitialState() { | |
20 | return { | |
21 | value: now, | |
22 | }; | |
23 | }, | |
24 | handleValueChange(value) { | |
25 | console.log(value && formatter.format(value)); | |
26 | this.setState({ value }); | |
27 | }, | |
6fc4e0e8 | 28 | clear() { |
29 | this.setState({ | |
30 | value: undefined, | |
31 | }); | |
32 | }, | |
d3606149 | 33 | render() { |
34 | return ( | |
35 | <div> | |
36 | <TimePicker formatter={formatter} locale={TimePickerLocale} | |
37 | defaultValue={now} /> | |
38 | <TimePicker formatter={formatter} locale={TimePickerLocale} | |
39 | value={this.state.value} | |
40 | onChange={this.handleValueChange}/> | |
6fc4e0e8 | 41 | <button onClick={this.clear}>clear</button> |
d3606149 | 42 | </div> |
43 | ); | |
96d366af | 44 | }, |
d3606149 | 45 | }); |
46 | ||
47 | ReactDom.render( | |
48 | <App />, | |
49 | document.getElementById('__react-content') | |
50 | ); |