diff --git a/src/pages/ExportPage.scss b/src/pages/ExportPage.scss
index 588535f..5734746 100644
--- a/src/pages/ExportPage.scss
+++ b/src/pages/ExportPage.scss
@@ -649,6 +649,95 @@
       }
     }
   }
+
+  .date-picker-modal {
+    background: var(--card-bg);
+    padding: 28px 32px;
+    border-radius: 16px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
+    min-width: 400px;
+
+    h3 {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin: 0 0 20px;
+    }
+
+    .date-inputs {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      margin-bottom: 24px;
+    }
+
+    .date-input-group {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      label {
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--text-secondary);
+      }
+
+      input[type="date"] {
+        padding: 10px 14px;
+        background: var(--bg-secondary);
+        border: 1px solid var(--border-color);
+        border-radius: 8px;
+        font-size: 14px;
+        color: var(--text-primary);
+        outline: none;
+        transition: border-color 0.2s;
+
+        &:focus {
+          border-color: var(--primary);
+        }
+
+        &::-webkit-calendar-picker-indicator {
+          cursor: pointer;
+          filter: var(--icon-filter, none);
+        }
+      }
+    }
+
+    .date-picker-actions {
+      display: flex;
+      gap: 12px;
+      justify-content: flex-end;
+
+      button {
+        padding: 10px 20px;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+
+      .cancel-btn {
+        background: var(--bg-secondary);
+        color: var(--text-primary);
+        border: 1px solid var(--border-color);
+
+        &:hover {
+          background: var(--bg-hover);
+        }
+      }
+
+      .confirm-btn {
+        background: var(--primary);
+        color: #fff;
+        border: none;
+
+        &:hover {
+          background: var(--primary-hover);
+        }
+      }
+    }
+  }
 }
 
 @keyframes exportSpin {
diff --git a/src/pages/ExportPage.tsx b/src/pages/ExportPage.tsx
index e39dd07..11f34c7 100644
--- a/src/pages/ExportPage.tsx
+++ b/src/pages/ExportPage.tsx
@@ -34,7 +34,8 @@ function ExportPage() {
   const [isExporting, setIsExporting] = useState(false)
   const [exportProgress, setExportProgress] = useState({ current: 0, total: 0, currentName: '' })
   const [exportResult, setExportResult] = useState<ExportResult | null>(null)
-  
+  const [showDatePicker, setShowDatePicker] = useState(false)
+
   const [options, setOptions] = useState<ExportOptions>({
     format: 'chatlab',
     dateRange: {
@@ -281,7 +282,7 @@ function ExportPage() {
                 <div className="date-range">
                   <Calendar size={16} />
                   <span>{formatDate(options.dateRange.start)} - {formatDate(options.dateRange.end)}</span>
-                  <button className="change-btn">
+                  <button className="change-btn" onClick={() => setShowDatePicker(true)}>
                     <ChevronDown size={14} />
                   </button>
                 </div>
@@ -370,6 +371,57 @@ function ExportPage() {
           </div>
         </div>
       )}
+
+      {/* 日期选择弹窗 */}
+      {showDatePicker && (
+        <div className="export-overlay" onClick={() => setShowDatePicker(false)}>
+          <div className="date-picker-modal" onClick={e => e.stopPropagation()}>
+            <h3>选择时间范围</h3>
+            <div className="date-inputs">
+              <div className="date-input-group">
+                <label>开始日期</label>
+                <input
+                  type="date"
+                  value={options.dateRange?.start.toISOString().split('T')[0] || ''}
+                  onChange={e => {
+                    const newDate = new Date(e.target.value)
+                    if (options.dateRange) {
+                      setOptions({
+                        ...options,
+                        dateRange: { ...options.dateRange, start: newDate }
+                      })
+                    }
+                  }}
+                />
+              </div>
+              <div className="date-input-group">
+                <label>结束日期</label>
+                <input
+                  type="date"
+                  value={options.dateRange?.end.toISOString().split('T')[0] || ''}
+                  onChange={e => {
+                    const newDate = new Date(e.target.value)
+                    if (options.dateRange) {
+                      setOptions({
+                        ...options,
+                        dateRange: { ...options.dateRange, end: newDate }
+                      })
+                    }
+                  }}
+                />
+              </div>
+            </div>
+            <div className="date-picker-actions">
+              <button className="cancel-btn" onClick={() => setShowDatePicker(false)}>
+                取消
+              </button>
+              <button className="confirm-btn" onClick={() => setShowDatePicker(false)}>
+                确定
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }