diff --git a/backend/app/assets/stylesheets/spree/backend/components/_date-picker.scss b/backend/app/assets/stylesheets/spree/backend/components/_date-picker.scss
index 82342ef5747..183cfceb9f9 100644
--- a/backend/app/assets/stylesheets/spree/backend/components/_date-picker.scss
+++ b/backend/app/assets/stylesheets/spree/backend/components/_date-picker.scss
@@ -1,9 +1,6 @@
 .date-range-filter {
   .range-divider {
-    padding: 0;
-  }
-  input.datepicker {
-    width: 96px !important;
+    color: $gray;
   }
 }
 
diff --git a/backend/app/views/spree/admin/orders/index.html.erb b/backend/app/views/spree/admin/orders/index.html.erb
index bb9ead4c6ce..bf5e981c789 100644
--- a/backend/app/views/spree/admin/orders/index.html.erb
+++ b/backend/app/views/spree/admin/orders/index.html.erb
@@ -20,14 +20,14 @@
         <div class="field-block col-xs-12 col-md-6 col-lg-4 col-xl-3">
           <div class="date-range-filter field">
             <%= label_tag :q_created_at_gt, Spree.t(:date_range) %>
-            <div class="date-range-fields">
-              <%= f.text_field :created_at_gt, class: 'datepicker datepicker-from', value: params[:q][:created_at_gt], placeholder: Spree.t(:start) %>
+            <div class="date-range-fields input-group">
+              <%= f.text_field :created_at_gt, class: 'datepicker form-control datepicker-from', value: params[:q][:created_at_gt], placeholder: Spree.t(:start) %>
 
-              <span class="range-divider">
+              <span class="range-divider input-group-addon">
                 <i class="fa fa-arrow-right"></i>
               </span>
 
-              <%= f.text_field :created_at_lt, class: 'datepicker datepicker-to', value: params[:q][:created_at_lt], placeholder: Spree.t(:stop) %>
+              <%= f.text_field :created_at_lt, class: 'datepicker form-control datepicker-to', value: params[:q][:created_at_lt], placeholder: Spree.t(:stop) %>
             </div>
           </div>
 
diff --git a/backend/app/views/spree/admin/shared/_report_criteria.html.erb b/backend/app/views/spree/admin/shared/_report_criteria.html.erb
index 2cbc5face46..8433ca34587 100644
--- a/backend/app/views/spree/admin/shared/_report_criteria.html.erb
+++ b/backend/app/views/spree/admin/shared/_report_criteria.html.erb
@@ -1,14 +1,14 @@
 <%= search_form_for @search, url: spree.sales_total_admin_reports_path  do |s| %>
-    <div class="date-range-filter field align-center">
-        <%= label_tag nil, Spree.t(:start), class: 'inline' %>
-        <%= s.text_field :created_at_gt, class: 'datepicker datepicker-from', value: datepicker_field_value(params[:q][:created_at_gt]) %>
+    <div class="date-range-filter field">
+      <div class="date-range-fields input-group">
+        <%= s.text_field :created_at_gt, class: 'datepicker datepicker-from form-control', value: datepicker_field_value(params[:q][:created_at_gt]), placeholder:  Spree.t(:start) %>
 
-        <span class="range-divider">
+        <span class="range-divider input-group-addon">
           <i class="fa fa-arrow-right"></i>
         </span>
 
-        <%= s.text_field :created_at_lt, class: 'datepicker datepicker-to', value: datepicker_field_value(params[:q][:created_at_lt]) %>
-        <%= label_tag nil, Spree.t(:end), class: 'inline' %>
+        <%= s.text_field :created_at_lt, class: 'datepicker datepicker-to form-control', value: datepicker_field_value(params[:q][:created_at_lt]), placeholder: Spree.t(:end) %>
+      </div>
     </div>
 
     <div class="actions filter-actions">
diff --git a/backend/app/views/spree/admin/shared/_report_order_criteria.html.erb b/backend/app/views/spree/admin/shared/_report_order_criteria.html.erb
index b9d928c005e..3e3b5ef59af 100644
--- a/backend/app/views/spree/admin/shared/_report_order_criteria.html.erb
+++ b/backend/app/views/spree/admin/shared/_report_order_criteria.html.erb
@@ -1,14 +1,14 @@
 <%= search_form_for @search, url: spree.sales_total_admin_reports_path  do |s| %>
-  <div class="date-range-filter field align-center">
-    <%= label_tag :q_completed_at_gt, Spree.t(:start), class: 'inline' %>
-    <%= s.text_field :completed_at_gt, class: 'datepicker datepicker-from', value: datepicker_field_value(params[:q][:completed_at_gt]) %>
+  <div class="date-range-filter field">
+    <div class="date-range-fields input-group">
+      <%= s.text_field :completed_at_gt, class: 'datepicker datepicker-from form-control', value: datepicker_field_value(params[:q][:completed_at_gt]), placeholder: Spree.t(:start) %>
 
-    <span class="range-divider">
-      <i class="fa fa-arrow-right"></i>
-    </span>
+      <span class="range-divider input-group-addon">
+        <i class="fa fa-arrow-right"></i>
+      </span>
 
-    <%= s.text_field :completed_at_lt, class: 'datepicker datepicker-to', value: datepicker_field_value(params[:q][:completed_at_lt]) %>
-    <%= label_tag :q_completed_at_lt, Spree.t(:end), class: 'inline' %>
+      <%= s.text_field :completed_at_lt, class: 'datepicker datepicker-to form-control', value: datepicker_field_value(params[:q][:completed_at_lt]), placeholder: Spree.t(:end) %>
+    </div>
   </div>
 
   <div class="actions filter-actions">
diff --git a/backend/app/views/spree/admin/stock_transfers/index.html.erb b/backend/app/views/spree/admin/stock_transfers/index.html.erb
index 7de9752aeec..3c600db858a 100644
--- a/backend/app/views/spree/admin/stock_transfers/index.html.erb
+++ b/backend/app/views/spree/admin/stock_transfers/index.html.erb
@@ -28,14 +28,14 @@
         <div class="field-block col-xs-3">
           <div class="date-range-filter field">
             <%= f.label nil, Spree.t(:date_range) %>
-            <div class="date-range-fields">
-              <%= f.text_field :created_at_gt, class: 'datepicker datepicker-from', include_blank: true, value: params[:q][:created_at_gt], placeholder: Spree.t(:start) %>
+            <div class="date-range-fields input-group">
+              <%= f.text_field :created_at_gt, class: 'datepicker datepicker-from form-control', include_blank: true, value: params[:q][:created_at_gt], placeholder: Spree.t(:start) %>
 
-              <span class="range-divider">
+              <span class="range-divider input-group-addon">
                 <i class="fa fa-arrow-right"></i>
               </span>
 
-              <%= f.text_field :created_at_lt, class: 'datepicker datepicker-to', include_blank: true, value: params[:q][:created_at_lt], placeholder: Spree.t(:stop) %>
+              <%= f.text_field :created_at_lt, class: 'datepicker datepicker-to form-control', include_blank: true, value: params[:q][:created_at_lt], placeholder: Spree.t(:stop) %>
             </div>
           </div>
         </div>
diff --git a/backend/app/views/spree/admin/style_guide/topics/forms/_building_forms.html.erb b/backend/app/views/spree/admin/style_guide/topics/forms/_building_forms.html.erb
index 80bd7fece16..e0b803f94d9 100644
--- a/backend/app/views/spree/admin/style_guide/topics/forms/_building_forms.html.erb
+++ b/backend/app/views/spree/admin/style_guide/topics/forms/_building_forms.html.erb
@@ -13,10 +13,12 @@
         <div class="field-block col-xs-3">
           <div class="date-range-filter field">
             <label for="q_created_at_gt">Date Range</label>
-            <div class="date-range-fields">
-              <input class="datepicker" placeholder="Date">
-              <span class="range-divider"><i class="fa fa-arrow-right"></i></span>
-              <input class="datepicker" placeholder="Picker">
+            <div class="input-group date-range-fields">
+              <input class="form-control datepicker datepicker-from" placeholder="From">
+              <span class="range-divider input-group-addon">
+                <i class="fa fa-arrow-right"></i>
+              </span>
+              <input class="form-control datepicker datepicker-to" placeholder="To">
             </div>
           </div>
         </div>