update some function

src/pages/Playback.tsx

@@ -1,5 +1,5 @@
-import { Download, Play } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
+import { CalendarDays, Download, Play } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useConfigStore } from "@/stores/configStore";
 import { apiJson } from "@/utils/api";
 import type { RecordingItem } from "@/types/api";
@@ -13,6 +13,7 @@ function toLocalDateInputValue(d: Date) {
 
 export default function Playback() {
   const { config, isLoading, error, load } = useConfigStore();
+  const dateInputRef = useRef<HTMLInputElement | null>(null);
   const [camera, setCamera] = useState<string>("");
   const [date, setDate] = useState<string>(() => toLocalDateInputValue(new Date()));
   const [items, setItems] = useState<RecordingItem[]>([]);
@@ -31,6 +32,18 @@ export default function Playback() {
 
   const canQuery = useMemo(() => Boolean(camera), [camera]);
 
+  const openDatePicker = () => {
+    const input = dateInputRef.current;
+    if (!input) return;
+    const pickerInput = input as HTMLInputElement & { showPicker?: () => void };
+    if (pickerInput.showPicker) {
+      pickerInput.showPicker();
+      return;
+    }
+    input.focus();
+    input.click();
+  };
+
   useEffect(() => {
     let alive = true;
     const run = async () => {
@@ -103,12 +116,23 @@ export default function Playback() {
 
             <div>
               <label className="text-xs text-zinc-400">Date</label>
-              <input
-                type="date"
-                value={date}
-                onChange={(e) => setDate(e.target.value)}
-                className="mt-1 h-9 w-full rounded-md border border-zinc-800 bg-zinc-950 px-3 text-sm text-zinc-100"
-              />
+              <div className="mt-1 flex items-center gap-2">
+                <input
+                  ref={dateInputRef}
+                  type="date"
+                  value={date}
+                  onChange={(e) => setDate(e.target.value)}
+                  className="h-9 w-full rounded-md border border-zinc-800 bg-zinc-950 px-3 text-sm text-zinc-100"
+                />
+                <button
+                  type="button"
+                  onClick={openDatePicker}
+                  className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-zinc-700 bg-zinc-950/40 text-zinc-200 transition hover:bg-zinc-900"
+                  title="Open calendar"
+                >
+                  <CalendarDays className="h-4 w-4" />
+                </button>
+              </div>
             </div>
           </div>