Use native date pickers across admin forms

src/views/manage/DashboardView.vue

@@ -252,8 +252,9 @@
               type="date"
               min="1900-01-01"
               max="2100-12-31"
-              class="h-11 rounded-lg border px-3 text-sm"
+              class="native-date-input h-12 min-w-0 flex-1 cursor-pointer rounded-xl border px-3 text-sm sm:flex-none sm:min-w-40"
               :class="[fieldClass]"
+              @click="openNativeDatePicker"
               @change="fetchAnalyticsData"
             />
             <input
@@ -261,8 +262,9 @@
               type="date"
               min="1900-01-01"
               max="2100-12-31"
-              class="h-11 rounded-lg border px-3 text-sm"
+              class="native-date-input h-12 min-w-0 flex-1 cursor-pointer rounded-xl border px-3 text-sm sm:flex-none sm:min-w-40"
               :class="[fieldClass]"
+              @click="openNativeDatePicker"
               @change="fetchAnalyticsData"
             />
             <button
@@ -489,6 +491,10 @@ const daysAgo = (days: number) => {
   date.setDate(date.getDate() - days)
   return date.toISOString().slice(0, 10)
 }
+const openNativeDatePicker = (event: MouseEvent) => {
+  const input = event.currentTarget as HTMLInputElement & { showPicker?: () => void }
+  input.showPicker?.()
+}
 const trendCanvas = ref<InstanceType<typeof SmoothTrendCanvas> | null>(null)
 const analyticsStart = ref(daysAgo(120))
 const analyticsEnd = ref(today())