Merge pull request #41 from react-component/fix-react-15.5-warning

[github/fretlink/time-picker.git] / examples / value-and-defaultValue.js

diff --git a/examples/value-and-defaultValue.js b/examples/value-and-defaultValue.js
index 67771c0a97c23621b6a7133c0cd384c306130d37..1e1baf8f726c913253d15d02154df76a01d9c26b 100644 (file)
--- a/examples/value-and-defaultValue.js
+++ b/examples/value-and-defaultValue.js
@@ -4,41 +4,38 @@ import 'rc-time-picker/assets/index.less';
 
 import React from 'react';
 import ReactDom from 'react-dom';
-
-import GregorianCalendar from 'gregorian-calendar';
-import DateTimeFormat from 'gregorian-calendar-format';
-import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
-
+import moment from 'moment';
 import TimePicker from 'rc-time-picker';
-import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN';
-
-const formatter = new DateTimeFormat('HH:mm:ss');
 
-const now = new GregorianCalendar(zhCn);
-now.setTime(Date.now());
-
-const App = React.createClass({
-  getInitialState() {
-    return {
-      value: now,
-    };
-  },
-  handleValueChange(value) {
-    console.log(value && formatter.format(value));
+class App extends React.Component {
+  state = {
+    value: moment(),
+  };
+  handleValueChange = (value) => {
+    console.log(value && value.format('HH:mm:ss'));
     this.setState({ value });
-  },
+  }
+  clear = () => {
+    this.setState({
+      value: undefined,
+    });
+  }
   render() {
     return (
       <div>
-        <TimePicker formatter={formatter} locale={TimePickerLocale}
-              defaultValue={now} />
-        <TimePicker formatter={formatter} locale={TimePickerLocale}
-              value={this.state.value}
-              onChange={this.handleValueChange}/>
+        <TimePicker
+          defaultValue={this.state.value}
+          onChange={this.handleValueChange}
+        />
+        <TimePicker
+          value={this.state.value}
+          onChange={this.handleValueChange}
+        />
+        <button onClick={this.clear}>clear</button>
       </div>
     );
   }
-});
+}
 
 ReactDom.render(
   <App />,