Testlio
diff --git a/‎dev/example-app.js‎
Lines changed: 27 additions & 1 deletion b/‎dev/example-app.js‎
Lines changed: 27 additions & 1 deletion
diff --git a/‎dev/index.html‎
Lines changed: 1 addition & 1 deletion b/‎dev/index.html‎
Lines changed: 1 addition & 1 deletion
@@ -1,8 +1,24 @@
 import React, { Component } from "react";
-import DateTimeField from "datetimepicker";
+import DateTimeField, { DateTimePickerSide } from "datetimepicker";
 import moment from "moment";
 
 export default class Basic extends Component {
+  state = {
+    isDateTimeSidePickerShown: false
+  }
+
+  showDateTimeSidePicker = () => {
+    this.setState({
+      isDateTimeSidePickerShown: true
+    })
+  }
+
+  resetTimeSidePicker = () => {
+    this.setState({
+      isDateTimeSidePickerShown: false
+    })
+  }
+
   render() {
     return (
       <div className="container">
@@ -96,6 +112,16 @@ export default class Basic extends Component {
             </pre>
           </div>
         </div>
+        <div className="row">
+          <div className="col-xs-12">
+            Wrapped el
+            <button onClick={this.showDateTimeSidePicker} ref="pickerbtn">Show picker</button>
+            { this.state.isDateTimeSidePickerShown ? <DateTimePickerSide 
+              target={this.refs.pickerbtn} 
+              onClose={this.resetTimeSidePicker}
+              timesShown={[1,2,4]} /> : null }
+          </div>
+        </div>
       </div>
       );
    }
 
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
-  <link href="./app.css" rel="stylesheet">
+  <link href="./../dist/styles.css" rel="stylesheet">
   <title>Basic Example</title>
   <style>
     .container {