Index: ARMS/index.html
===================================================================
diff -u -r82e29a2ccc82ce30c70fc8f53898af4d5890d6cd -re63b3e6f8eff33570ec85b90f319bb451774d9e5
--- ARMS/index.html	(.../index.html)	(revision 82e29a2ccc82ce30c70fc8f53898af4d5890d6cd)
+++ ARMS/index.html	(.../index.html)	(revision e63b3e6f8eff33570ec85b90f319bb451774d9e5)
@@ -77,6 +77,9 @@
     <!-- bootstrap wysihtml5 - text editor -->
     <link rel="stylesheet" href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
 
+    <!-- daterange picker -->
+    <link rel="stylesheet" href="../bower_components/bootstrap-daterangepicker/daterangepicker.css">
+
     <!-- bootstrap wysihtml5 - text editor -->
     <link rel="stylesheet" href="./css/arms.css">
     <link rel="stylesheet" href="./css/arms-side.css">
@@ -205,13 +208,17 @@
 <script type="text/javascript" src='../dist/js/DataTables-1.10.16/extensions/Responsive/js/dataTables.responsive.js' charset="utf-8"></script>
 <!-- Style Setting -->
 
+<!-- date-range-picker -->
+<script src="../bower_components/moment/min/moment.min.js"></script>
+<script src="../bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
+
 <script>
     //<![CDATA[
     $(function () {
         includeLayout();
 
         $(".addressClick").click(function () {
-            $(this).parent().siblings().removeClass("active")
+            $(this).parent().siblings().removeClass("active");
             $(this).parent().addClass("active");
         });
     });
Index: bootstrap/css/bootstrap-theme.css
===================================================================
diff -u -rd9a0e0d2013e3b5dff901371b9ff4ec3827640f6 -re63b3e6f8eff33570ec85b90f319bb451774d9e5
--- bootstrap/css/bootstrap-theme.css	(.../bootstrap-theme.css)	(revision d9a0e0d2013e3b5dff901371b9ff4ec3827640f6)
+++ bootstrap/css/bootstrap-theme.css	(.../bootstrap-theme.css)	(revision e63b3e6f8eff33570ec85b90f319bb451774d9e5)
@@ -477,12 +477,26 @@
             // Code for the menu buttons
         </script>
     </div>
-    <div class="font12 col-md-12">&nbsp;
+    <div class="font12 col-md-12">
+        <div class="form-group">
+            <div class="input-group">
+                <div class="input-group-addon">
+                    <i class="fa fa-clock-o"></i>
+                </div>
+                <input type="text" class="form-control pull-right" id="reservationtime">
+            </div>
+            <!-- /.input group -->
+        </div>
     </div>
 
     <script>
         $(function() {
             topbeat("9eb75e7e6e3e");
+
+            //Date range picker
+            $('#reservation').daterangepicker()
+            //Date range picker with time picker
+            $('#reservationtime').daterangepicker({ timePicker: true, timePickerIncrement: 30, locale: { format: 'MM/DD/YYYY hh:mm A' }})
         });
 
         function topbeat(selectedNodeHost){
@@ -539,8 +553,7 @@
                                 }]
                             }
                         }
-
-                        window.myRadar = new Chart(document.getElementById('canvas'), config);
+                        new Chart(document.getElementById('canvas'), config);
                     }
                 });
             });
@@ -554,7 +567,7 @@
             -ms-user-select: none;
         }
     </style>
-    <div class="font12 col-md-6">
+    <div class="font12 col-md-6" id="topbeat">
         <canvas id="canvas"></canvas>
     </div>