diff --git a/resources/views/business/pages/show.blade.php b/resources/views/business/pages/show.blade.php
index 3fc0b687..166488e5 100644
--- a/resources/views/business/pages/show.blade.php
+++ b/resources/views/business/pages/show.blade.php
@@ -238,6 +238,42 @@
                 font-size: 0.75rem;
             }
 
+            .installation-date-filter {
+                display: flex;
+                grid-column: span 2;
+                align-items: center;
+                gap: 0.4rem;
+                min-width: 0;
+                color: #595959;
+                font-size: 0.75rem;
+                white-space: nowrap;
+            }
+
+            .installation-date-filter__label {
+                flex: 0 0 auto;
+            }
+
+            .installation-date-filter__range {
+                flex: 1 1 auto;
+                min-width: 0;
+            }
+
+            .installation-date-filter .upstream-data-date input {
+                height: 2.1rem;
+                font-size: 0.75rem;
+            }
+
+            .installation-date-range-error {
+                grid-column: 1 / -1;
+                margin: 0;
+                color: #b80000;
+                font-size: 0.75rem;
+            }
+
+            .installation-date-range-error[hidden] {
+                display: none;
+            }
+
             .installation-filter-actions {
                 display: flex;
                 align-items: center;
@@ -246,9 +282,15 @@
 
             @media (max-width: 1100px) {
                 .installation-filter-bar { grid-template-columns: repeat(2, minmax(14rem, 1fr)); }
+                .installation-date-filter { grid-column: 1 / -1; }
             }
             @media (max-width: 650px) {
                 .installation-filter-bar { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
+                .installation-date-filter {
+                    flex-direction: column;
+                    align-items: stretch;
+                    gap: 0.25rem;
+                }
             }
 
             .biz-card-head {
@@ -730,12 +772,15 @@
             @elseif ($descriptor)
                 <div class="biz-card mt-6">
                     @if ($page['slug'] === 'installation-details')
-                        <form method="GET" action="{{ request()->url() }}" class="installation-filter-bar" aria-label="安装明细筛选查询栏">
+                        @include('business.pages.partials.date-range-picker')
+                        <form method="GET" id="installationFilterForm" action="{{ request()->url() }}" class="installation-filter-bar" aria-label="安装明细筛选查询栏" autocomplete="off">
                             @php
+                                $dateRangeFilters = [
+                                    ['from' => 'created_from', 'to' => 'created_to', 'label' => '创建日期：', 'aria' => '创建日期'],
+                                    ['from' => 'customer_review_from', 'to' => 'customer_review_to', 'label' => '客服审核时间：', 'aria' => '客服审核时间'],
+                                    ['from' => 'finance_review_from', 'to' => 'finance_review_to', 'label' => '财务审核时间：', 'aria' => '财务审核时间'],
+                                ];
                                 $filterFields = [
-                                    ['name' => 'created_from', 'label' => '创建日期：', 'type' => 'date'], ['name' => 'created_to', 'label' => '至：', 'type' => 'date'],
-                                    ['name' => 'customer_review_from', 'label' => '客服审核时间：', 'type' => 'date'], ['name' => 'customer_review_to', 'label' => '至：', 'type' => 'date'],
-                                    ['name' => 'finance_review_from', 'label' => '财务审核时间：', 'type' => 'date'], ['name' => 'finance_review_to', 'label' => '至：', 'type' => 'date'],
                                     ['name' => 'push_status', 'label' => '推送状态：'], ['name' => 'order_no', 'label' => '订单编号：'],
                                     ['name' => 'customer_review', 'label' => '客服审核：', 'options' => ['0'=>'未审核','1'=>'已审核']], ['name' => 'finance_review', 'label' => '财务审核：', 'options' => ['0'=>'未审核','1'=>'已审核']],
                                     ['name' => 'quote_status', 'label' => '报价状态：'], ['name' => 'arranged_status', 'label' => '是否安排：', 'options' => ['0'=>'未安排','1'=>'已安排']],
@@ -745,6 +790,34 @@
                                     ['name' => 'order_type', 'label' => '订单类型：'], ['name' => 'product_id', 'label' => '商品ID：'],
                                 ];
                             @endphp
+                            @foreach ($dateRangeFilters as $dateRange)
+                                <div class="installation-date-filter">
+                                    <span class="installation-date-filter__label">{{ $dateRange['label'] }}</span>
+                                    <div class="upstream-data-date-range installation-date-filter__range">
+                                        <span class="upstream-data-date" data-date-picker>
+                                            <input id="{{ $dateRange['from'] }}" type="text" name="{{ $dateRange['from'] }}" value="{{ request($dateRange['from']) }}" readonly autocomplete="off" placeholder="开始日期" aria-label="{{ $dateRange['aria'] }}开始日期" aria-describedby="installationDateRangeError" data-date-input>
+                                            <button type="button" class="upstream-data-date__clear" data-date-clear hidden aria-label="清除{{ $dateRange['aria'] }}开始日期">
+                                                <span class="material-icons-outlined" aria-hidden="true">close</span>
+                                            </button>
+                                            <button type="button" class="upstream-data-date__pick" data-date-toggle aria-label="选择{{ $dateRange['aria'] }}开始日期">
+                                                <span class="material-icons-outlined" aria-hidden="true">calendar_today</span>
+                                            </button>
+                                            <div class="upstream-data-calendar" role="dialog" aria-label="{{ $dateRange['aria'] }}开始日期日历" data-date-calendar hidden></div>
+                                        </span>
+                                        <b class="upstream-data-date-range__sep">至</b>
+                                        <span class="upstream-data-date" data-date-picker>
+                                            <input id="{{ $dateRange['to'] }}" type="text" name="{{ $dateRange['to'] }}" value="{{ request($dateRange['to']) }}" readonly autocomplete="off" placeholder="结束日期" aria-label="{{ $dateRange['aria'] }}结束日期" aria-describedby="installationDateRangeError" data-date-input>
+                                            <button type="button" class="upstream-data-date__clear" data-date-clear hidden aria-label="清除{{ $dateRange['aria'] }}结束日期">
+                                                <span class="material-icons-outlined" aria-hidden="true">close</span>
+                                            </button>
+                                            <button type="button" class="upstream-data-date__pick" data-date-toggle aria-label="选择{{ $dateRange['aria'] }}结束日期">
+                                                <span class="material-icons-outlined" aria-hidden="true">calendar_today</span>
+                                            </button>
+                                            <div class="upstream-data-calendar" role="dialog" aria-label="{{ $dateRange['aria'] }}结束日期日历" data-date-calendar hidden></div>
+                                        </span>
+                                    </div>
+                                </div>
+                            @endforeach
                             @foreach ($filterFields as $filter)
                                 <label class="installation-filter-field">
                                     <span>{{ $filter['label'] }}</span>
@@ -755,12 +828,47 @@
                                     @endif
                                 </label>
                             @endforeach
+                            <p id="installationDateRangeError" class="installation-date-range-error" role="alert" hidden>结束日期不能早于开始日期。</p>
                             <div class="installation-filter-actions">
                                 <button type="submit" class="biz-btn biz-btn-primary">查询</button>
                                 <a href="{{ request()->url() }}" class="biz-btn biz-btn-ghost">清除</a>
                                 <a href="{{ route('business.installation-details.export', request()->query()) }}" class="biz-btn biz-btn-ghost">导出</a>
                             </div>
                         </form>
+                        <script>
+                            (function () {
+                                var form = document.getElementById('installationFilterForm');
+                                if (!form) { return; }
+
+                                if (window.CaiWuDatePicker) {
+                                    window.CaiWuDatePicker.setup(form);
+                                }
+
+                                var error = document.getElementById('installationDateRangeError');
+                                var ranges = [
+                                    ['created_from', 'created_to'],
+                                    ['customer_review_from', 'customer_review_to'],
+                                    ['finance_review_from', 'finance_review_to']
+                                ];
+
+                                form.addEventListener('submit', function (event) {
+                                    var invalidEnd = null;
+                                    ranges.forEach(function (names) {
+                                        var from = form.elements.namedItem(names[0]);
+                                        var to = form.elements.namedItem(names[1]);
+                                        var invalid = Boolean(from && to && from.value && to.value && from.value > to.value);
+                                        if (from) { from.setAttribute('aria-invalid', invalid ? 'true' : 'false'); }
+                                        if (to) { to.setAttribute('aria-invalid', invalid ? 'true' : 'false'); }
+                                        if (invalid && !invalidEnd) { invalidEnd = to; }
+                                    });
+                                    error.hidden = !invalidEnd;
+                                    if (invalidEnd) {
+                                        event.preventDefault();
+                                        invalidEnd.focus();
+                                    }
+                                });
+                            })();
+                        </script>
                     @endif
                     <div class="biz-card-head">
                         <div class="biz-card-title">
diff --git a/tests/Feature/Business/ManagementCrudTest.php b/tests/Feature/Business/ManagementCrudTest.php
index 3e2b2b95..36d0d91c 100644
--- a/tests/Feature/Business/ManagementCrudTest.php
+++ b/tests/Feature/Business/ManagementCrudTest.php
@@ -247,6 +247,17 @@ class ManagementCrudTest extends FeatureTestCase
             ->assertSeeText('订单类型：')
             ->assertSeeText('商品ID：')
             ->assertSeeText('导出')
+            ->assertSee('id="installationFilterForm"', false)
+            ->assertSee('name="created_from"', false)
+            ->assertSee('name="created_to"', false)
+            ->assertSee('name="customer_review_from"', false)
+            ->assertSee('name="customer_review_to"', false)
+            ->assertSee('name="finance_review_from"', false)
+            ->assertSee('name="finance_review_to"', false)
+            ->assertSee('data-date-picker', false)
+            ->assertSee('data-date-calendar', false)
+            ->assertSee("window.CaiWuDatePicker.setup(form)", false)
+            ->assertSee('结束日期不能早于开始日期。')
             ->assertSee('installation-details-table-wrap', false)
             ->assertSee('installation-details-table', false)
             ->assertSee('writing-mode: horizontal-tb', false)