Update Example for datetime picker

NOTE: not sure but I think that there should be a separate file for the script of this example

production/form_advanced.html

@@ -663,6 +663,7 @@
                 </div>
                 <!-- /form datepicker -->
 
+        
                <!-- form datetimepicker -->
 <div class="x_panel" style="">
     <div class="x_title">
@@ -688,7 +689,9 @@
 
         <div class="container">
             <div class="row">
-                              <div class='col-sm-6'>
+
+                <div class='col-sm-4'>
+                    Basic Example
                     <div class="form-group">
                         <div class='input-group date' id='myDatepicker'>
                             <input type='text' class="form-control" />
@@ -698,13 +701,70 @@
                         </div>
                     </div>
                 </div>
+
+                <div class='col-sm-4'>
+                    Only Date Picker
+                    <div class="form-group">
+                        <div class='input-group date' id='myDatepicker2'>
+                            <input type='text' class="form-control" />
+                            <span class="input-group-addon">
+                               <span class="glyphicon glyphicon-calendar"></span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                
+                 <div class='col-sm-4'>
+                    Only Time Picker <small>For 24H format use format: 'HH:mm'</small>
+                    <div class="form-group">
+                        <div class='input-group date' id='myDatepicker3'>
+                            <input type='text' class="form-control" />
+                            <span class="input-group-addon">
+                               <span class="glyphicon glyphicon-calendar"></span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class='col-sm-4'>
+                    Using ReadOnly
+                    <div class="form-group">
+                        <div class='input-group date' id='myDatepicker4'>
+                            <input type='text' class="form-control" readonly="readonly" />
+                            <span class="input-group-addon">
+                               <span class="glyphicon glyphicon-calendar"></span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                
+                 <div class='col-sm-4'>
+                    Linked Picker Parent
+                    <div class="form-group">
+                        <div class='input-group date' id='datetimepicker6'>
+                            <input type='text' class="form-control" />
+                            <span class="input-group-addon">
+                                    <span class="glyphicon glyphicon-calendar"></span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class='col-sm-4'>
+                    Linked Picker Children
+                    <div class="form-group">
+                        <div class='input-group date' id='datetimepicker7'>
+                            <input type='text' class="form-control" />
+                            <span class="input-group-addon">
+                                    <span class="glyphicon glyphicon-calendar"></span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                
             </div>
         </div>
     </div>
 </div>
-                <script>
-                  $('#myDatepicker').datetimepicker()
-                </script>
                 <!-- /form datetimepicker -->
 
                 <!-- form grid slider -->
@@ -1272,5 +1332,36 @@
     <!-- Custom Theme Scripts -->
     <script src="../build/js/custom.min.js"></script>
     
+    <!-- Initialize datetimepicker -->
+<script>
+    $('#myDatepicker').datetimepicker();
+    
+    $('#myDatepicker2').datetimepicker({
+        format: 'DD.MM.YYYY'
+    });
+    
+    $('#myDatepicker3').datetimepicker({
+        format: 'hh:mm A'
+    });
+    
+    $('#myDatepicker4').datetimepicker({
+        ignoreReadonly: true,
+        allowInputToggle: true
+    });
+
+    $('#datetimepicker6').datetimepicker();
+    
+    $('#datetimepicker7').datetimepicker({
+        useCurrent: false
+    });
+    
+    $("#datetimepicker6").on("dp.change", function(e) {
+        $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
+    });
+    
+    $("#datetimepicker7").on("dp.change", function(e) {
+        $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
+    });
+</script>
   </body>
 </html>