diff --git a/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.directive.js b/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.directive.js
index a46531c102..f7abf562af 100644
--- a/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.directive.js
+++ b/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.directive.js
@@ -79,6 +79,8 @@
 
       horizon.d3_pie_chart_distribution.init();
       horizon.d3_pie_chart_usage.init();
+      horizon.forms.datepicker();
+      $('#datepicker').datepicker();
 
       var line_chart_selector = '.line-chart';
       var line_chart_data = [
diff --git a/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html b/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html
index e1fab3bc05..b98c332465 100644
--- a/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html
+++ b/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html
@@ -676,6 +676,17 @@
         <form class="form-horizontal">
           <fieldset>
             <legend translate>Other Input Types</legend>
+            <div class="form-group">
+              <label translate class="col-lg-2 control-label" for="datepicker">Datepicker</label>
+              <div class="col-lg-10">
+                <div class='input-group'>
+                  <input type="text" class="form-control" id="datepicker">
+                  <span class="input-group-addon datepicker-addon">
+                    <span class="fa fa-calendar"></span>
+                  </span>
+                </div>
+              </div>
+            </div>
             <div class="form-group">
               <label translate class="col-lg-2 control-label" for="datetime-localInput">Datetime</label>
               <div class="col-lg-10">