Merge pull request #44 from s2t2/master

Add import example to README
xgfe · Oct 17, 2016 · df91a40 · df91a40
2 parents 7bed292 + 091f744
commit df91a40
Showing 1 changed file with 39 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -16,30 +16,45 @@ Check [index.android.js](https://github.com/xgfe/react-native-datepicker/blob/ma
 ## Usage
 
 ```javascript
-<DatePicker
-  style={{width: 200}}
-  date={this.state.date}
-  mode="date"
-  placeholder="select date"
-  format="YYYY-MM-DD"
-  minDate="2016-05-01"
-  maxDate="2016-06-01"
-  confirmBtnText="Confirm"
-  cancelBtnText="Cancel"
-  customStyles={{
-    dateIcon: {
-      position: 'absolute',
-      left: 0,
-      top: 4,
-      marginLeft: 0
-    },
-    dateInput: {
-      marginLeft: 36
-    },
-    ... // You can check the source to find the other keys.
-  }}
-  onDateChange={(date) => {this.setState({date: date})}}
-/>
+
+import React, { Component } from 'react'
+import DatePicker from 'react-native-datepicker'
+
+export default class MyDatePicker extends Component {
+  constructor(props){
+    super(props)
+    this.state = {date:"2016-05-15"}
+  }
+
+  render(){
+    return (
+      <DatePicker
+        style={{width: 200}}
+        date={this.state.date}
+        mode="date"
+        placeholder="select date"
+        format="YYYY-MM-DD"
+        minDate="2016-05-01"
+        maxDate="2016-06-01"
+        confirmBtnText="Confirm"
+        cancelBtnText="Cancel"
+        customStyles={{
+          dateIcon: {
+            position: 'absolute',
+            left: 0,
+            top: 4,
+            marginLeft: 0
+          },
+          dateInput: {
+            marginLeft: 36
+          }
+          // ... You can check the source to find the other keys.
+        }}
+        onDateChange={(date) => {this.setState({date: date})}}
+      />
+    )
+  }
+}
 ```
 
 You can check [index.js](https://github.com/xgfe/react-native-datepicker/blob/master/index.android.js) in the Example for detail.