update

frontend/src/pages/Kalender.tsx

@@ -70,6 +70,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import DashboardLayout from '../components/dashboard/DashboardLayout';
 import ServiceModePage from '../components/shared/ServiceModePage';
 import ChatAwareFab from '../components/shared/ChatAwareFab';
+import GermanDateField from '../components/shared/GermanDateField';
 import { toGermanDateTime, fromGermanDate, fromGermanDateTime } from '../utils/dateInput';
 
 import { usePermissionContext } from '../contexts/PermissionContext';
@@ -185,24 +186,6 @@ function formatDateLong(d: Date): string {
   return `${days[d.getDay()]}, ${d.getDate()}. ${MONTH_LABELS[d.getMonth()]} ${d.getFullYear()}`;
 }
 
-/** ISO string → YYYY-MM-DDTHH:MM (for type="datetime-local") */
-function toDatetimeLocalValue(iso: string | null | undefined): string {
-  if (!iso) return '';
-  const d = new Date(iso);
-  if (isNaN(d.getTime())) return '';
-  const pad = (n: number) => String(n).padStart(2, '0');
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
-}
-
-/** ISO string → YYYY-MM-DD (for type="date") */
-function toDateInputValue(iso: string | null | undefined): string {
-  if (!iso) return '';
-  const d = new Date(iso);
-  if (isNaN(d.getTime())) return '';
-  const pad = (n: number) => String(n).padStart(2, '0');
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
-}
-
 // ──────────────────────────────────────────────────────────────────────────────
 // Types for unified calendar
 // ──────────────────────────────────────────────────────────────────────────────
@@ -1343,44 +1326,30 @@ function VeranstaltungFormDialog({
             }
             label="Ganztägig"
           />
-          <TextField
+          <GermanDateField
             label="Von"
-            type={form.ganztaegig ? 'date' : 'datetime-local'}
-            value={
-              form.ganztaegig
-                ? toDateInputValue(form.datum_von)
-                : toDatetimeLocalValue(form.datum_von)
-            }
-            onChange={(e) => {
-              const raw = e.target.value;
-              if (!raw) return;
+            mode={form.ganztaegig ? 'date' : 'datetime'}
+            value={form.datum_von}
+            onChange={(iso) => {
               const d = form.ganztaegig
-                ? new Date(raw + 'T00:00:00')
-                : new Date(raw + ':00');
+                ? new Date(iso + 'T00:00:00')
+                : new Date(iso);
               if (isNaN(d.getTime())) return;
               handleChange('datum_von', d.toISOString());
             }}
-            InputLabelProps={{ shrink: true }}
             fullWidth
           />
-          <TextField
+          <GermanDateField
             label="Bis"
-            type={form.ganztaegig ? 'date' : 'datetime-local'}
-            value={
-              form.ganztaegig
-                ? toDateInputValue(form.datum_bis)
-                : toDatetimeLocalValue(form.datum_bis)
-            }
-            onChange={(e) => {
-              const raw = e.target.value;
-              if (!raw) return;
+            mode={form.ganztaegig ? 'date' : 'datetime'}
+            value={form.datum_bis}
+            onChange={(iso) => {
               const d = form.ganztaegig
-                ? new Date(raw + 'T23:59:00')
-                : new Date(raw + ':00');
+                ? new Date(iso + 'T23:59:00')
+                : new Date(iso);
               if (isNaN(d.getTime())) return;
               handleChange('datum_bis', d.toISOString());
             }}
-            InputLabelProps={{ shrink: true }}
             fullWidth
           />
           <TextField
@@ -1525,13 +1494,12 @@ function VeranstaltungFormDialog({
                     </FormControl>
                   )}
 
-                  <TextField
+                  <GermanDateField
                     label="Wiederholungen bis"
                     size="small"
-                    type="date"
+                    mode="date"
                     value={wiederholungBis}
-                    onChange={(e) => setWiederholungBis(e.target.value)}
-                    InputLabelProps={{ shrink: true }}
+                    onChange={(iso) => setWiederholungBis(iso)}
                     fullWidth
                     disabled={!!editingEvent?.wiederholung_parent_id}
                     helperText="Letztes Datum für Wiederholungen"
@@ -2333,22 +2301,20 @@ export default function Kalender() {
               <>
                 {/* Date range inputs for list view */}
                 <Box sx={{ display: 'flex', gap: 1, mb: 2, flexWrap: 'wrap', alignItems: 'center' }}>
-                  <TextField
-                    type="date"
+                  <GermanDateField
                     label="Von"
                     size="small"
+                    mode="date"
                     value={listFrom}
-                    onChange={(e) => setListFrom(e.target.value)}
-                    InputLabelProps={{ shrink: true }}
+                    onChange={(iso) => setListFrom(iso)}
                     sx={{ width: 170 }}
                   />
-                  <TextField
-                    type="date"
+                  <GermanDateField
                     label="Bis"
                     size="small"
+                    mode="date"
                     value={listTo}
-                    onChange={(e) => setListTo(e.target.value)}
-                    InputLabelProps={{ shrink: true }}
+                    onChange={(iso) => setListTo(iso)}
                     sx={{ width: 170 }}
                   />
                 </Box>