diff --git a/pages/forms/advanced.html b/pages/forms/advanced.html
index 6993dcca1..b3ccb9514 100644
--- a/pages/forms/advanced.html
+++ b/pages/forms/advanced.html
@@ -1115,6 +1115,17 @@
                 <h3 class="card-title">Date picker</h3>
               </div>
               <div class="card-body">
+                <!-- Date -->
+                <div class="form-group">
+                  <label>Date:</label>
+                    <div class="input-group date" id="reservationdate" data-target-input="nearest">
+                        <input type="text" class="form-control datetimepicker-input" data-target="#reservationdate"/>
+                        <div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
+                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
+                        </div>
+                    </div>
+                </div>
+                <!-- /.form group -->
                 <!-- Date range -->
                 <div class="form-group">
                   <label>Date range:</label>
@@ -1157,8 +1168,11 @@
                   </div>
                 </div>
                 <!-- /.form group -->
-
               </div>
+                <div class="card-footer">
+                  Visit <a href="https://tempusdominus.github.io/bootstrap-4/Usage/">tempusdominus </a> for more examples and information about
+                  the plugin.
+                </div>
               <!-- /.card-body -->
             </div>
             <!-- /.card -->
@@ -1389,6 +1403,10 @@
     //Money Euro
     $('[data-mask]').inputmask()
 
+    //Date range picker
+    $('#reservationdate').datetimepicker({
+        format: 'L'
+    });
     //Date range picker
     $('#reservation').daterangepicker()
     //Date range picker with time picker