diff --git a/resources/views/blade/input/date-range.blade.php b/resources/views/blade/input/date-range.blade.php
new file mode 100644
index 0000000000..719ad17c74
--- /dev/null
+++ b/resources/views/blade/input/date-range.blade.php
@@ -0,0 +1,44 @@
+@props([
+    'name_start',
+    'name_end',
+    'value_start' => '',
+    'value_end' => '',
+    'placeholder' => trans('general.select_date'),
+    // 'today' caps both pickers at today, or pass a moment-parseable string.
+    // Null (default) leaves both pickers uncapped.
+    'max_date' => null,
+    'format' => 'YYYY-MM-DD',
+    'id' => null,
+])
+
+{{-- Two eonasdan datetimepickers linked so picking a start date sets the
+     end picker's minDate, and picking an end date sets the start picker's
+     maxDate. Replaces the bootstrap-datepicker .input-daterange pattern.
+     Linking is handled in snipeit.js by pairing .js-date-range-start with
+     the .js-date-range-end sibling under the same .js-date-range parent. --}}
+<div {{ $attributes->merge(['class' => 'row js-date-range']) }} @if ($id) id="{{ $id }}" @endif>
+    <div class="col-xs-6" style="padding-right: 5px;">
+        <div
+            class="input-group date js-date-range-start"
+            data-provide="datetimepicker"
+            data-format="{{ $format }}"
+            data-default-now="false"
+            @if ($max_date) data-max-date="{{ $max_date }}" @endif
+        >
+            <input type="text" name="{{ $name_start }}" value="{{ $value_start }}" placeholder="{{ $placeholder }}" aria-label="{{ $name_start }}" class="form-control">
+            <span class="input-group-addon"><x-icon type="calendar" /></span>
+        </div>
+    </div>
+    <div class="col-xs-6" style="padding-left: 5px;">
+        <div
+            class="input-group date js-date-range-end"
+            data-provide="datetimepicker"
+            data-format="{{ $format }}"
+            data-default-now="false"
+            @if ($max_date) data-max-date="{{ $max_date }}" @endif
+        >
+            <input type="text" name="{{ $name_end }}" value="{{ $value_end }}" placeholder="{{ $placeholder }}" aria-label="{{ $name_end }}" class="form-control">
+            <span class="input-group-addon"><x-icon type="calendar" /></span>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/reports/custom/asset.blade.php b/resources/views/reports/custom/asset.blade.php
index 15b07a2158..67774b1b21 100644
--- a/resources/views/reports/custom/asset.blade.php
+++ b/resources/views/reports/custom/asset.blade.php
@@ -434,12 +434,15 @@
           <!-- Purchase Date -->
             <div class="form-group purchase-range{{ ($errors->has('purchase_start') || $errors->has('purchase_end')) ? ' has-error' : '' }}">
               <label for="purchase_start" class="col-md-3 control-label">{{ trans('general.purchase_date') }}</label>
-              <div class="input-daterange input-group col-md-7" id="purchase-range-datepicker">
-
-                  <input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="purchase_start" aria-label="purchase_start" value="{{ $template->textValue('purchase_start', old('purchase_start')) }}">
-                  <span class="input-group-addon"> - </span>
-                  <input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="purchase_end" aria-label="purchase_end" value="{{ $template->textValue('purchase_end', old('purchase_end')) }}">
-              </div>
+              <x-input.date-range
+                  class="col-md-7"
+                  id="purchase-range-datepicker"
+                  name_start="purchase_start"
+                  name_end="purchase_end"
+                  :value_start="$template->textValue('purchase_start', old('purchase_start'))"
+                  :value_end="$template->textValue('purchase_end', old('purchase_end'))"
+                  max_date="today"
+              />
 
                 @if ($errors->has('purchase_start') || $errors->has('purchase_end'))
                     <div class="col-md-9 col-lg-offset-3">
@@ -471,11 +474,15 @@
           <!-- Created Date -->
             <div class="form-group created-range{{ ($errors->has('created_start') || $errors->has('created_end')) ? ' has-error' : '' }}">
               <label for="created_start" class="col-md-3 control-label">{{ trans('general.created_at') }} </label>
-              <div class="input-daterange input-group col-md-7" id="created-range-datepicker">
-                  <input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="created_start" aria-label="created_start" value="{{ $template->textValue('created_start', old('created_start')) }}">
-                  <span class="input-group-addon"> - </span>
-                  <input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="created_end" aria-label="created_end" value="{{ $template->textValue('created_end', old('created_end')) }}">
-              </div>
+              <x-input.date-range
+                  class="col-md-7"
+                  id="created-range-datepicker"
+                  name_start="created_start"
+                  name_end="created_end"
+                  :value_start="$template->textValue('created_start', old('created_start'))"
+                  :value_end="$template->textValue('created_end', old('created_end'))"
+                  max_date="today"
+              />
 
                 @if ($errors->has('created_start') || $errors->has('created_end'))
                     <div class="col-md-9 col-lg-offset-3">
@@ -488,11 +495,15 @@
           <!-- Checkout Date -->
           <div class="form-group checkout-range{{ ($errors->has('checkout_date_start') || $errors->has('checkout_date_end')) ? ' has-error' : '' }}">
               <label for="checkout_date" class="col-md-3 control-label">{{ trans('general.checkout') }} </label>
-              <div class="input-daterange input-group col-md-7" id="checkout-range-datepicker">
-                  <input type="text" placeholder="{{ trans('general.select_date') }}"  class="form-control" name="checkout_date_start" aria-label="checkout_date_start" value="{{ $template->textValue('checkout_date_start', old('checkout_date_start')) }}">
-                  <span class="input-group-addon"> - </span>
-                  <input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="checkout_date_end" aria-label="checkout_date_end" value="{{ $template->textValue('checkout_date_end', old('checkout_date_end')) }}">
-              </div>
+              <x-input.date-range
+                  class="col-md-7"
+                  id="checkout-range-datepicker"
+                  name_start="checkout_date_start"
+                  name_end="checkout_date_end"
+                  :value_start="$template->textValue('checkout_date_start', old('checkout_date_start'))"
+                  :value_end="$template->textValue('checkout_date_end', old('checkout_date_end'))"
+                  max_date="today"
+              />
 
               @if ($errors->has('checkout_date_start') || $errors->has('checkout_date_end'))
                   <div class="col-md-9 col-lg-offset-3">
@@ -506,11 +517,15 @@
           <!-- Last Checkin Date -->
           <div class="form-group checkin-range{{ ($errors->has('checkin_date_start') || $errors->has('checkin_date_end')) ? ' has-error' : '' }}">
               <label for="checkin_date" class="col-md-3 control-label">{{ trans('admin/hardware/table.last_checkin_date') }}</label>
-              <div class="input-daterange input-group col-md-7" id="checkin-range-datepicker">
-                  <input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="checkin_date_start" aria-label="checkin_date_start" value="{{ $template->textValue('checkin_date_start', old('checkin_date_start')) }}">
-                  <span class="input-group-addon"> - </span>
-                  <input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="checkin_date_end" aria-label="checkin_date_end" value="{{ $template->textValue('checkin_date_end', old('checkin_date_end')) }}">
-              </div>
+              <x-input.date-range
+                  class="col-md-7"
+                  id="checkin-range-datepicker"
+                  name_start="checkin_date_start"
+                  name_end="checkin_date_end"
+                  :value_start="$template->textValue('checkin_date_start', old('checkin_date_start'))"
+                  :value_end="$template->textValue('checkin_date_end', old('checkin_date_end'))"
+                  max_date="today"
+              />
 
               @if ($errors->has('checkin_date_start') || $errors->has('checkin_date_end'))
                   <div class="col-md-9 col-lg-offset-3">
@@ -523,11 +538,14 @@
             <!-- Expected Checkin Date -->
             <div class="form-group expected_checkin-range{{ ($errors->has('expected_checkin_start') || $errors->has('expected_checkin_end')) ? ' has-error' : '' }}">
               <label for="expected_checkin_start" class="col-md-3 control-label">{{ trans('admin/hardware/form.expected_checkin') }}</label>
-              <div class="input-daterange input-group col-md-7" id="expected_checkin-range-datepicker">
-                  <input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="expected_checkin_start" aria-label="expected_checkin_start" value="{{ $template->textValue('expected_checkin_start', old('expected_checkin_start')) }}">
-                  <span class="input-group-addon"> - </span>
-                  <input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="expected_checkin_end" aria-label="expected_checkin_end" value="{{ $template->textValue('expected_checkin_end', old('expected_checkin_end')) }}">
-              </div>
+              <x-input.date-range
+                  class="col-md-7"
+                  id="expected_checkin-range-datepicker"
+                  name_start="expected_checkin_start"
+                  name_end="expected_checkin_end"
+                  :value_start="$template->textValue('expected_checkin_start', old('expected_checkin_start'))"
+                  :value_end="$template->textValue('expected_checkin_end', old('expected_checkin_end'))"
+              />
 
                 @if ($errors->has('expected_checkin_start') || $errors->has('expected_checkin_end'))
                     <div class="col-md-9 col-lg-offset-3">
@@ -541,11 +559,14 @@
               <!-- EoL Date -->
               <div class="form-group asset_eol_date-range {{ ($errors->has('asset_eol_date_start') || $errors->has('asset_eol_date_end')) ? ' has-error' : '' }}">
                   <label for="asset_eol_date" class="col-md-3 control-label">{{ trans('admin/hardware/form.eol_date') }}</label>
-                  <div class="input-daterange input-group col-md-7" id="asset_eol_date-range-datepicker">
-                      <input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="asset_eol_date_start" aria-label="asset_eol_date_start" value="{{ $template->textValue('asset_eol_date_start', old('asset_eol_date_start')) }}">
-                      <span class="input-group-addon"> - </span>
-                      <input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="asset_eol_date_end" aria-label="asset_eol_date_end" value="{{ $template->textValue('asset_eol_date_end', old('asset_eol_date_end')) }}">
-                  </div>
+                  <x-input.date-range
+                      class="col-md-7"
+                      id="asset_eol_date-range-datepicker"
+                      name_start="asset_eol_date_start"
+                      name_end="asset_eol_date_end"
+                      :value_start="$template->textValue('asset_eol_date_start', old('asset_eol_date_start'))"
+                      :value_end="$template->textValue('asset_eol_date_end', old('asset_eol_date_end'))"
+                  />
 
                   @if ($errors->has('asset_eol_date_start') || $errors->has('asset_eol_date_end'))
                       <div class="col-md-9 col-lg-offset-3">
@@ -558,11 +579,15 @@
               <!-- Last Audit Date -->
               <div class="form-group last_audit-range{{ ($errors->has('last_audit_start') || $errors->has('last_audit_end')) ? ' has-error' : '' }}">
                   <label for="last_audit_start" class="col-md-3 control-label">{{ trans('general.last_audit') }}</label>
-                  <div class="input-daterange input-group col-md-7" id="last_audit-range-datepicker">
-                      <input type="text" placeholder="{{ trans('general.select_date') }}"  class="form-control" name="last_audit_start" aria-label="last_audit_start" value="{{ $template->textValue('last_audit_start', old('last_audit_start')) }}">
-                      <span class="input-group-addon"> - </span>
-                      <input type="text" placeholder="{{ trans('general.select_date') }}"  class="form-control" name="last_audit_end" aria-label="last_audit_end" value="{{ $template->textValue('last_audit_end', old('last_audit_end')) }}">
-                  </div>
+                  <x-input.date-range
+                      class="col-md-7"
+                      id="last_audit-range-datepicker"
+                      name_start="last_audit_start"
+                      name_end="last_audit_end"
+                      :value_start="$template->textValue('last_audit_start', old('last_audit_start'))"
+                      :value_end="$template->textValue('last_audit_end', old('last_audit_end'))"
+                      max_date="today"
+                  />
 
                   @if ($errors->has('last_audit_start') || $errors->has('last_audit_end'))
                       <div class="col-md-9 col-lg-offset-3">
@@ -575,11 +600,14 @@
               <!-- Next Audit Date -->
               <div class="form-group next_audit-range{{ ($errors->has('next_audit_start') || $errors->has('next_audit_end')) ? ' has-error' : '' }}">
                   <label for="next_audit_start" class="col-md-3 control-label">{{ trans('general.next_audit_date') }}</label>
-                  <div class="input-daterange input-group col-md-7" id="next_audit-range-datepicker">
-                      <input type="text" placeholder="{{ trans('general.select_date') }}"  class="form-control" name="next_audit_start" aria-label="next_audit_start" value="{{ $template->textValue('next_audit_start', old('next_audit_start')) }}">
-                      <span class="input-group-addon"> - </span>
-                      <input type="text" placeholder="{{ trans('general.select_date') }}"  class="form-control" name="next_audit_end" aria-label="next_audit_end" value="{{ $template->textValue('next_audit_end', old('next_audit_end')) }}">
-                  </div>
+                  <x-input.date-range
+                      class="col-md-7"
+                      id="next_audit-range-datepicker"
+                      name_start="next_audit_start"
+                      name_end="next_audit_end"
+                      :value_start="$template->textValue('next_audit_start', old('next_audit_start'))"
+                      :value_end="$template->textValue('next_audit_end', old('next_audit_end'))"
+                  />
 
                   @if ($errors->has('next_audit_start') || $errors->has('next_audit_end'))
                       <div class="col-md-9 col-lg-offset-3">
@@ -592,11 +620,15 @@
               <!-- Last updated Date -->
               <div class="form-group last_updated-range{{ ($errors->has('last_updated_start') || $errors->has('last_updated_end')) ? ' has-error' : '' }}">
                   <label for="last_updated_start" class="col-md-3 control-label">{{ trans('general.updated_at') }}</label>
-                  <div class="input-daterange input-group col-md-7" id="last_updated-range-datepicker">
-                      <input type="text" placeholder="{{ trans('general.select_date') }}"  class="form-control" name="last_updated_start" aria-label="last_updated_start" value="{{ $template->textValue('last_updated_start', old('last_updated_start')) }}">
-                      <span class="input-group-addon"> - </span>
-                      <input type="text" placeholder="{{ trans('general.select_date') }}"  class="form-control" name="last_updated_end" aria-label="last_updated_end" value="{{ $template->textValue('last_updated_end', old('last_updated_end')) }}">
-                  </div>
+                  <x-input.date-range
+                      class="col-md-7"
+                      id="last_updated-range-datepicker"
+                      name_start="last_updated_start"
+                      name_end="last_updated_end"
+                      :value_start="$template->textValue('last_updated_start', old('last_updated_start'))"
+                      :value_end="$template->textValue('last_updated_end', old('last_updated_end'))"
+                      max_date="today"
+                  />
 
                   @if ($errors->has('last_updated_start') || $errors->has('last_updated_end'))
                       <div class="col-md-9 col-lg-offset-3">
@@ -814,76 +846,6 @@
 @section('moar_scripts')
   <script>
 
-      $('.purchase-range .input-daterange').datepicker({
-          clearBtn: true,
-          todayHighlight: true,
-          endDate: '0d',
-          format: 'yyyy-mm-dd',
-          keepEmptyValues: true,
-      });
-
-      $('.created-range .input-daterange').datepicker({
-          clearBtn: true,
-          todayHighlight: true,
-          endDate: '0d',
-          format: 'yyyy-mm-dd',
-          keepEmptyValues: true,
-      });
-
-      $('.checkout-range .input-daterange').datepicker({
-          clearBtn: true,
-          todayHighlight: true,
-          endDate: '0d',
-          format: 'yyyy-mm-dd',
-          keepEmptyValues: true,
-      });
-
-      $('.checkin-range .input-daterange').datepicker({
-          clearBtn: true,
-          todayHighlight: true,
-          endDate: '0d',
-          format: 'yyyy-mm-dd',
-          keepEmptyValues: true,
-      });
-
-      $('.expected_checkin-range .input-daterange').datepicker({
-          clearBtn: true,
-          todayHighlight: true,
-          format: 'yyyy-mm-dd',
-          keepEmptyValues: true,
-      });
-
-      $('.asset_eol_date-range .input-daterange').datepicker({
-          clearBtn: true,
-          todayHighlight: true,
-          format: 'yyyy-mm-dd',
-          keepEmptyValues: true,
-      });
-
-      $('.last_audit-range .input-daterange').datepicker({
-          clearBtn: true,
-          todayHighlight: true,
-          endDate:'0d',
-          format: 'yyyy-mm-dd',
-          keepEmptyValues: true,
-      });
-
-      $('.next_audit-range .input-daterange').datepicker({
-          clearBtn: true,
-          todayHighlight: true,
-          format: 'yyyy-mm-dd',
-          keepEmptyValues: true,
-      });
-
-      $('.last_updated-range .input-daterange').datepicker({
-          clearBtn: true,
-          todayHighlight: true,
-          endDate:'0d',
-          format: 'yyyy-mm-dd',
-          keepEmptyValues: true,
-      });
-
-
       $("#checkAll").change(function () {
         $("#included_fields_wrapper input:checkbox").prop('checked', $(this).prop("checked"));
       });
diff --git a/resources/views/reports/custom/component.blade.php b/resources/views/reports/custom/component.blade.php
index c0cbfcbcfc..74ed020f03 100644
--- a/resources/views/reports/custom/component.blade.php
+++ b/resources/views/reports/custom/component.blade.php
@@ -281,12 +281,15 @@
                             <!-- Purchase Date -->
                             <div class="form-group purchase-range{{ ($errors->has('purchase_start') || $errors->has('purchase_end')) ? ' has-error' : '' }}">
                                 <label for="purchase_start" class="col-md-3 control-label">{{ trans('general.purchase_date') }}</label>
-                                <div class="input-daterange input-group col-md-7" id="purchase-range-datepicker">
-
-                                    <input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="purchase_start" aria-label="purchase_start" value="{{ $template->textValue('purchase_start', old('purchase_start')) }}">
-                                    <span class="input-group-addon"> - </span>
-                                    <input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="purchase_end" aria-label="purchase_end" value="{{ $template->textValue('purchase_end', old('purchase_end')) }}">
-                                </div>
+                                <x-input.date-range
+                                    class="col-md-7"
+                                    id="purchase-range-datepicker"
+                                    name_start="purchase_start"
+                                    name_end="purchase_end"
+                                    :value_start="$template->textValue('purchase_start', old('purchase_start'))"
+                                    :value_end="$template->textValue('purchase_end', old('purchase_end'))"
+                                    max_date="today"
+                                />
 
                                 @if ($errors->has('purchase_start') || $errors->has('purchase_end'))
                                     <div class="col-md-9 col-lg-offset-3">
@@ -350,11 +353,15 @@
                             <!-- Checkout Date -->
                             <div class="form-group checkout-range{{ ($errors->has('checkout_date_start') || $errors->has('checkout_date_end')) ? ' has-error' : '' }}">
                                 <label for="checkout_date" class="col-md-3 control-label">{{ trans('general.checkout') }} </label>
-                                <div class="input-daterange input-group col-md-7" id="checkout-range-datepicker">
-                                    <input type="text" placeholder="{{ trans('general.select_date') }}"  class="form-control" name="checkout_date_start" aria-label="checkout_date_start" value="{{ $template->textValue('checkout_date_start', old('checkout_date_start')) }}">
-                                    <span class="input-group-addon"> - </span>
-                                    <input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="checkout_date_end" aria-label="checkout_date_end" value="{{ $template->textValue('checkout_date_end', old('checkout_date_end')) }}">
-                                </div>
+                                <x-input.date-range
+                                    class="col-md-7"
+                                    id="checkout-range-datepicker"
+                                    name_start="checkout_date_start"
+                                    name_end="checkout_date_end"
+                                    :value_start="$template->textValue('checkout_date_start', old('checkout_date_start'))"
+                                    :value_end="$template->textValue('checkout_date_end', old('checkout_date_end'))"
+                                    max_date="today"
+                                />
 
                                 @if ($errors->has('checkout_date_start') || $errors->has('checkout_date_end'))
                                     <div class="col-md-9 col-lg-offset-3">
@@ -367,11 +374,15 @@
                             <!-- Created Date -->
                             <div class="form-group created-range{{ ($errors->has('created_start') || $errors->has('created_end')) ? ' has-error' : '' }}">
                                 <label for="created_start" class="col-md-3 control-label">{{ trans('general.created_at') }} </label>
-                                <div class="input-daterange input-group col-md-7" id="created-range-datepicker">
-                                    <input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="created_start" aria-label="created_start" value="{{ $template->textValue('created_start', old('created_start')) }}">
-                                    <span class="input-group-addon"> - </span>
-                                    <input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="created_end" aria-label="created_end" value="{{ $template->textValue('created_end', old('created_end')) }}">
-                                </div>
+                                <x-input.date-range
+                                    class="col-md-7"
+                                    id="created-range-datepicker"
+                                    name_start="created_start"
+                                    name_end="created_end"
+                                    :value_start="$template->textValue('created_start', old('created_start'))"
+                                    :value_end="$template->textValue('created_end', old('created_end'))"
+                                    max_date="today"
+                                />
 
                                 @if ($errors->has('created_start') || $errors->has('created_end'))
                                     <div class="col-md-9 col-lg-offset-3">
@@ -384,11 +395,15 @@
                             <!-- Last updated Date -->
                             <div class="form-group last_updated-range{{ ($errors->has('last_updated_start') || $errors->has('last_updated_end')) ? ' has-error' : '' }}">
                                 <label for="last_updated_start" class="col-md-3 control-label">{{ trans('general.updated_at') }}</label>
-                                <div class="input-daterange input-group col-md-7" id="last_updated-range-datepicker">
-                                    <input type="text" placeholder="{{ trans('general.select_date') }}"  class="form-control" name="last_updated_start" aria-label="last_updated_start" value="{{ $template->textValue('last_updated_start', old('last_updated_start')) }}">
-                                    <span class="input-group-addon"> - </span>
-                                    <input type="text" placeholder="{{ trans('general.select_date') }}"  class="form-control" name="last_updated_end" aria-label="last_updated_end" value="{{ $template->textValue('last_updated_end', old('last_updated_end')) }}">
-                                </div>
+                                <x-input.date-range
+                                    class="col-md-7"
+                                    id="last_updated-range-datepicker"
+                                    name_start="last_updated_start"
+                                    name_end="last_updated_end"
+                                    :value_start="$template->textValue('last_updated_start', old('last_updated_start'))"
+                                    :value_end="$template->textValue('last_updated_end', old('last_updated_end'))"
+                                    max_date="today"
+                                />
 
                                 @if ($errors->has('last_updated_start') || $errors->has('last_updated_end'))
                                     <div class="col-md-9 col-lg-offset-3">
@@ -542,38 +557,6 @@
             $("#included_fields_wrapper input:checkbox").prop('checked', $(this).prop("checked"));
         });
 
-        $('.purchase-range .input-daterange').datepicker({
-            clearBtn: true,
-            todayHighlight: true,
-            endDate: '0d',
-            format: 'yyyy-mm-dd',
-            keepEmptyValues: true,
-        });
-
-        $('.checkout-range .input-daterange').datepicker({
-            clearBtn: true,
-            todayHighlight: true,
-            endDate: '0d',
-            format: 'yyyy-mm-dd',
-            keepEmptyValues: true,
-        });
-
-        $('.created-range .input-daterange').datepicker({
-            clearBtn: true,
-            todayHighlight: true,
-            endDate:'0d',
-            format: 'yyyy-mm-dd',
-            keepEmptyValues: true,
-        });
-
-        $('.last_updated-range .input-daterange').datepicker({
-            clearBtn: true,
-            todayHighlight: true,
-            endDate:'0d',
-            format: 'yyyy-mm-dd',
-            keepEmptyValues: true,
-        });
-
         $("#savetemplateform").submit(function(e) {
             e.preventDefault(e);
 
diff --git a/resources/views/reports/index.blade.php b/resources/views/reports/index.blade.php
index f163ba301f..60b34de361 100755
--- a/resources/views/reports/index.blade.php
+++ b/resources/views/reports/index.blade.php
@@ -85,10 +85,12 @@
                         <option value="365">{{ trans('general.last_n_days', ['days' => 365]) }}</option>
                         <option value="custom">{{ trans('general.custom_range') }}…</option>
                     </select>
-                    <div id="customRangePicker" class="input-daterange input-group" style="display:none; width:auto;">
-                        <input type="text" id="chartStartDate" class="form-control input-sm" placeholder="{{ trans('general.select_date') }}" style="width:110px;" autocomplete="off">
-                        <span class="input-group-addon">–</span>
-                        <input type="text" id="chartEndDate" class="form-control input-sm" placeholder="{{ trans('general.select_date') }}" style="width:110px;" autocomplete="off">
+                    <div id="customRangePicker" style="display:none;">
+                        <x-input.date-range
+                            name_start="chartStartDate"
+                            name_end="chartEndDate"
+                            max_date="today"
+                        />
                     </div>
                 </form>
 
@@ -655,17 +657,14 @@ $('#chartTimeRange').on('change', function() {
     }
 });
 
-$('#customRangePicker').datepicker({
-    clearBtn: true,
-    todayHighlight: true,
-    endDate: '0d',
-    format: 'yyyy-mm-dd',
-    keepEmptyValues: true,
-});
-
-$('#customRangePicker').on('changeDate', function() {
-    var start = $('#chartStartDate').val();
-    var end   = $('#chartEndDate').val();
+// dp.change is eonasdan datetimepicker's equivalent of bootstrap-datepicker's
+// changeDate event. Init is handled automatically by data-provide on the
+// component; we only need the read-both-values-and-reload handler here.
+// The inputs use name attributes to satisfy the component prop; JS still
+// reads by id since chartStartDate / chartEndDate are the id values too.
+$('#customRangePicker').on('dp.change', 'input', function() {
+    var start = $('[name="chartStartDate"]').val();
+    var end   = $('[name="chartEndDate"]').val();
     if (start && end && start <= end) {
         loadCharts({ start_date: start, end_date: end });
     }