diff --git a/app/views/admin/reports/_date_range_form.html.haml b/app/views/admin/reports/_date_range_form.html.haml
index 0afa600cae..ccd8151de9 100644
--- a/app/views/admin/reports/_date_range_form.html.haml
+++ b/app/views/admin/reports/_date_range_form.html.haml
@@ -6,8 +6,7 @@
 
 .row.date-range-filter
   .alpha.two.columns= label_tag nil, t(:date_range)
-  .omega.fourteen.columns
-    = f.text_field "#{field}_gt", :class => 'datetimepicker datepicker-from', :placeholder => t(:start), data: { controller: "flatpickr", "flatpickr-enable-time-value": true, "flatpickr-default-date-value": "startOfDay" }, value: start_date 
-    %span.range-divider
-      %i.icon-arrow-right
-    = f.text_field "#{field}_lt", :class => 'datetimepicker datepicker-to', :placeholder => t(:stop), data: { controller: "flatpickr", "flatpickr-enable-time-value": true, "flatpickr-default-date-value": "endOfDay" }, value: end_date 
+  .omega.fourteen.columns{ data: { controller: "flatpickr", "flatpickr-mode-value": "range" } }
+    = text_field_tag nil, nil, class: "datepicker", data: { "flatpickr-target": "instance", action: "flatpickr_clear@window->flatpickr#clear" }
+    = text_field_tag "q[#{field}_gt]", nil, data: { "flatpickr-target": "start" }, style: "display: none", value: start_date
+    = text_field_tag "q[#{field}_lt]", nil, data: { "flatpickr-target": "end" }, style: "display: none", value: end_date
diff --git a/spec/system/admin/reports/orders_and_fulfillment_spec.rb b/spec/system/admin/reports/orders_and_fulfillment_spec.rb
index 4be6589234..0b40a3eaa2 100644
--- a/spec/system/admin/reports/orders_and_fulfillment_spec.rb
+++ b/spec/system/admin/reports/orders_and_fulfillment_spec.rb
@@ -125,8 +125,8 @@ RSpec.describe "Orders And Fulfillment" do
         it "is precise to time of day, not just date" do
           # When I generate a customer report
           # with a timeframe that includes one order but not the other
-          pick_datetime "#q_completed_at_gt", datetime_start1
-          pick_datetime "#q_completed_at_lt", datetime_end
+          find("input.datepicker").click
+          select_dates_from_daterangepicker datetime_start1, datetime_end
 
           find("#display_summary_row").set(false) # hides the summary rows
           run_report
@@ -141,7 +141,8 @@ RSpec.describe "Orders And Fulfillment" do
           # 2 rows for order1 + 1 summary row
 
           # setting a time interval to include both orders
-          pick_datetime "#q_completed_at_gt", datetime_start2
+          find("input.datepicker").click
+          select_dates_from_daterangepicker datetime_start2, Time.zone.now
           run_report
           # Then I should see the rows for both orders
           expect(all('table.report__table tbody tr').count).to eq(5)