diff --git a/app/assets/javascripts/app/controllers/layout_ref.coffee b/app/assets/javascripts/app/controllers/layout_ref.coffee
index 777175dfb..48753c140 100644
--- a/app/assets/javascripts/app/controllers/layout_ref.coffee
+++ b/app/assets/javascripts/app/controllers/layout_ref.coffee
@@ -1500,10 +1500,27 @@ class InputsRef extends App.ControllerContent
     @$('.searchableAjaxSelectPlaceholder').replaceWith( searchableAjaxSelectObject.element() )
 
     # time and timeframe
-    @$('.time').timepicker()
+    @$('.js-timepicker1, .js-timepicker2').timepicker()
 
-    @$('.timeframe').timepicker
+    @$('.timeframe').timepicker(
       maxHours: 99
+    )
+
+    # date picker
+    @$('.js-datepicker3').datepicker(
+      todayHighlight: true
+      startDate: new Date().toLocaleDateString('de-DE') # returns 25.09.2015
+      format: 'dd.mm.yyyy',
+      container: @$('.js-datepicker3').parent()
+    )
+
+    # date time picker
+    @$('.js-datepicker4').datepicker(
+      todayHighlight: true
+      startDate: new Date().toLocaleDateString('en-US') # returns 9/25/2015
+      container: @$('.js-datepicker4').parent()
+    )
+    @$('.js-timepicker4').timepicker()
 
 App.Config.set( 'layout_ref/inputs', InputsRef, 'Routes' )
 
diff --git a/app/assets/javascripts/app/views/layout_ref/inputs.jst.eco b/app/assets/javascripts/app/views/layout_ref/inputs.jst.eco
index 7ad2bb3d7..1c9804267 100644
--- a/app/assets/javascripts/app/views/layout_ref/inputs.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/inputs.jst.eco
@@ -4,9 +4,26 @@
   <div style="max-width: 500px">
     <h2>Time</h2>
     <p>A time of the day</p>
-    <input type="text" value="14:40" class="time">
+    <input type="text" value="14:40" class="time js-timepicker1">
+
     <p>Add class <code>time--12</code> to activate AM/PM support</p>
-    <input type="text" value="2:40 PM" class="time time--12">
+    <input type="text" value="2:40 PM" class="time time--12 js-timepicker2">
+
+    <p>A date</p>
+    <div class="date form-group">
+      <div class="controls">
+        <input type="text" value="10/28/2015" class="form-control js-datepicker3">
+      </div>
+    </div>
+
+    <p>A date time</p>
+    <div class="date form-group formGroup--bundle">
+      <div class="controls">
+        <input type="text" value="10/28/2015" class="form-control js-datepicker4">
+        <div class="controls-label">at</div>
+        <input type="text" value="08:00" class="form-control time js-timepicker4">
+      </div>
+    </div>
 
     <h2>Timeframe</h2>
     <p>A time between 00:00 and 99:99 hours</p>