diff --git a/resources/views/business/pages/systemization-todos.blade.php b/resources/views/business/pages/systemization-todos.blade.php
index 3bc65340..7b12efff 100644
--- a/resources/views/business/pages/systemization-todos.blade.php
+++ b/resources/views/business/pages/systemization-todos.blade.php
@@ -1,4 +1,5 @@
 <section class="biz-card mt-6 sys-todo-page" aria-label="系统化待办">
+    @include('business.pages.partials.date-range-picker')
     <style>
         .sys-todo-page { --sys-gold:#856632; --sys-gold-soft:#f7f0de; --sys-border:#d8d2c7; --sys-muted:#666; }
         .sys-todo-page .biz-card-head { align-items:flex-start; gap:1rem; }
@@ -128,8 +129,14 @@
         .sys-todo-field input, .sys-todo-field select { min-height:2.15rem; }
         .sys-todo-field textarea { min-height:5.5rem; resize:vertical; line-height:1.55; overflow:hidden; }
         .sys-todo-date-control { display:flex; align-items:center; gap:.45rem; min-width:0; }
-        .sys-todo-date-control input[type="date"] { flex:1 1 auto; min-width:0; }
-        .sys-todo-date-control.is-pending input[type="date"] { background:#f7f0de; color:#777; }
+        .sys-todo-date-picker { flex:1 1 auto; min-width:0; }
+        .sys-todo-date-picker input { padding-right:3.35rem; cursor:pointer; }
+        .sys-todo-date-control.is-pending .sys-todo-date-picker input { background:#f7f0de; color:#777; cursor:not-allowed; }
+        .sys-todo-date-control button:disabled { opacity:.5; cursor:not-allowed; }
+        .sys-todo-filter-date { position:relative; display:flex; flex:1 1 auto; min-width:0; }
+        .sys-todo-filter-date input { padding-right:3.35rem; cursor:pointer; }
+        .sys-todo-filter-date .upstream-data-calendar,
+        .sys-todo-date-picker .upstream-data-calendar { width:min(16.5rem,calc(100vw - 3rem)); }
         .sys-todo-date-pending { display:inline-flex; flex:0 0 auto; align-items:center; gap:.3rem; min-height:2.15rem; padding:0 .55rem; border:1px solid var(--sys-border); border-radius:.45rem; background:#fcfaf5; color:#51483c; font-size:.75rem; white-space:nowrap; cursor:pointer; }
         .sys-todo-date-pending input[type="checkbox"] { width:1rem; height:1rem; min-height:0; padding:0; accent-color:var(--sys-gold); }
         .sys-todo-date-note { color:#856632; font-size:.68rem; line-height:1.4; }
@@ -305,8 +312,30 @@
                 </div>
             </details>
         </div>
-        <label>开始时间<input type="date" name="start_date" value="{{ $todoFilters['start_date'] }}"></label>
-        <label>完成时间<input type="date" name="due_date" value="{{ $todoFilters['due_date'] }}"></label>
+        <label>开始时间
+            <span class="upstream-data-date sys-todo-filter-date" data-date-picker>
+                <input type="text" name="start_date" value="{{ $todoFilters['start_date'] }}" readonly autocomplete="off" placeholder="YYYY-MM-DD" aria-label="筛选开始时间" data-date-input>
+                <button type="button" class="upstream-data-date__clear" data-date-clear hidden aria-label="清除筛选开始时间">
+                    <span class="material-icons-outlined" aria-hidden="true">close</span>
+                </button>
+                <button type="button" class="upstream-data-date__pick" data-date-toggle aria-label="选择筛选开始时间">
+                    <span class="material-icons-outlined" aria-hidden="true">calendar_today</span>
+                </button>
+                <div class="upstream-data-calendar" role="dialog" aria-label="筛选开始时间日历" data-date-calendar hidden></div>
+            </span>
+        </label>
+        <label>完成时间
+            <span class="upstream-data-date sys-todo-filter-date" data-date-picker>
+                <input type="text" name="due_date" value="{{ $todoFilters['due_date'] }}" readonly autocomplete="off" placeholder="YYYY-MM-DD" aria-label="筛选完成时间" data-date-input>
+                <button type="button" class="upstream-data-date__clear" data-date-clear hidden aria-label="清除筛选完成时间">
+                    <span class="material-icons-outlined" aria-hidden="true">close</span>
+                </button>
+                <button type="button" class="upstream-data-date__pick" data-date-toggle aria-label="选择筛选完成时间">
+                    <span class="material-icons-outlined" aria-hidden="true">calendar_today</span>
+                </button>
+                <div class="upstream-data-calendar" role="dialog" aria-label="筛选完成时间日历" data-date-calendar hidden></div>
+            </span>
+        </label>
         <label class="sys-todo-filter__keyword">关键词<input type="search" name="keyword" value="{{ $todoFilters['keyword'] }}" placeholder="事项、内容、责任人、进展或备注"></label>
         <div class="sys-todo-filter__actions">
             <button type="submit" class="sys-todo-page__button sys-todo-page__button--primary">筛选</button>
@@ -624,7 +653,16 @@
                     <div class="sys-todo-field sys-todo-field--3">
                         <label for="sysTodoStartDate">开始时间</label>
                         <div class="sys-todo-date-control" data-sys-todo-date-control="start">
-                            <input id="sysTodoStartDate" type="date" name="start_date">
+                            <span class="upstream-data-date sys-todo-date-picker" data-date-picker>
+                                <input id="sysTodoStartDate" type="text" name="start_date" readonly autocomplete="off" placeholder="YYYY-MM-DD" aria-label="开始时间" data-date-input>
+                                <button type="button" class="upstream-data-date__clear" data-date-clear data-sys-todo-date-clear="start" hidden aria-label="清除开始时间">
+                                    <span class="material-icons-outlined" aria-hidden="true">close</span>
+                                </button>
+                                <button type="button" class="upstream-data-date__pick" data-date-toggle data-sys-todo-date-toggle="start" aria-label="选择开始时间">
+                                    <span class="material-icons-outlined" aria-hidden="true">calendar_today</span>
+                                </button>
+                                <div class="upstream-data-calendar" role="dialog" aria-label="开始时间日历" data-date-calendar hidden></div>
+                            </span>
                             <label class="sys-todo-date-pending">
                                 <input type="checkbox" name="start_pending" value="1" data-sys-todo-date-pending="start">
                                 <span>待定</span>
@@ -636,7 +674,16 @@
                     <div class="sys-todo-field sys-todo-field--3">
                         <label for="sysTodoDueDate">完成时间</label>
                         <div class="sys-todo-date-control" data-sys-todo-date-control="due">
-                            <input id="sysTodoDueDate" type="date" name="due_date">
+                            <span class="upstream-data-date sys-todo-date-picker" data-date-picker>
+                                <input id="sysTodoDueDate" type="text" name="due_date" readonly autocomplete="off" placeholder="YYYY-MM-DD" aria-label="完成时间" data-date-input>
+                                <button type="button" class="upstream-data-date__clear" data-date-clear data-sys-todo-date-clear="due" hidden aria-label="清除完成时间">
+                                    <span class="material-icons-outlined" aria-hidden="true">close</span>
+                                </button>
+                                <button type="button" class="upstream-data-date__pick" data-date-toggle data-sys-todo-date-toggle="due" aria-label="选择完成时间">
+                                    <span class="material-icons-outlined" aria-hidden="true">calendar_today</span>
+                                </button>
+                                <div class="upstream-data-calendar" role="dialog" aria-label="完成时间日历" data-date-calendar hidden></div>
+                            </span>
                             <label class="sys-todo-date-pending">
                                 <input type="checkbox" name="due_pending" value="1" data-sys-todo-date-pending="due">
                                 <span>待定</span>
@@ -735,6 +782,8 @@
         (function () {
             var dialog = document.getElementById('sysTodoDialog');
             var form = dialog.querySelector('[data-sys-todo-form]');
+            var pageRoot = dialog.closest('.sys-todo-page');
+            if (window.CaiWuDatePicker) window.CaiWuDatePicker.setup(pageRoot || document);
             var methodInput = dialog.querySelector('[data-sys-todo-method]');
             var title = document.getElementById('sysTodoDialogTitle');
             var existing = dialog.querySelector('[data-sys-todo-existing]');
@@ -763,6 +812,8 @@
                 note: form.querySelector('[data-sys-todo-date-note="start"]'),
                 caption: dialog.querySelector('[data-sys-todo-date-note-caption="start"]'),
                 wrap: dialog.querySelector('[data-sys-todo-date-control="start"]'),
+                toggle: dialog.querySelector('[data-sys-todo-date-toggle="start"]'),
+                clear: dialog.querySelector('[data-sys-todo-date-clear="start"]'),
             };
             var dueDateControl = {
                 input: form.querySelector('[name="due_date"]'),
@@ -770,6 +821,8 @@
                 note: form.querySelector('[data-sys-todo-date-note="due"]'),
                 caption: dialog.querySelector('[data-sys-todo-date-note-caption="due"]'),
                 wrap: dialog.querySelector('[data-sys-todo-date-control="due"]'),
+                toggle: dialog.querySelector('[data-sys-todo-date-toggle="due"]'),
+                clear: dialog.querySelector('[data-sys-todo-date-clear="due"]'),
             };
             var positionField = dialog.querySelector('[data-sys-todo-position-field]');
             var positionSelect = dialog.querySelector('[data-sys-todo-position]');
@@ -837,6 +890,11 @@
             }
 
             function syncDateControl(control, fromToggle) {
+                if (control.toggle) control.toggle.disabled = control.pending.checked;
+                if (control.clear) {
+                    control.clear.disabled = control.pending.checked;
+                    control.clear.hidden = control.pending.checked || control.input.value === '';
+                }
                 control.wrap.classList.toggle('is-pending', control.pending.checked);
                 if (control.pending.checked) {
                     control.input.value = '';
diff --git a/tests/Feature/Business/SystemizationTodosTest.php b/tests/Feature/Business/SystemizationTodosTest.php
index 58fdbc68..ce7afcf4 100644
--- a/tests/Feature/Business/SystemizationTodosTest.php
+++ b/tests/Feature/Business/SystemizationTodosTest.php
@@ -41,6 +41,13 @@ class SystemizationTodosTest extends FeatureTestCase
             ->assertSee('data-sys-todo-reset-columns', false)
             ->assertSee('data-sys-todo-date-pending="start"', false)
             ->assertSee('data-sys-todo-date-pending="due"', false)
+            ->assertSee('data-sys-todo-date-toggle="start"', false)
+            ->assertSee('data-sys-todo-date-clear="due"', false)
+            ->assertSee('data-date-picker', false)
+            ->assertSee('window.CaiWuDatePicker', false)
+            ->assertSee('placeholder="YYYY-MM-DD"', false)
+            ->assertDontSee('id="sysTodoStartDate" type="date"', false)
+            ->assertDontSee('id="sysTodoDueDate" type="date"', false)
             ->assertSee('name="start_pending"', false)
             ->assertSee('name="due_pending"', false)
             ->assertSee('data-sys-todo-owner-filter', false)