From 507111e8e8f0cc65a6883578fa8f38424d7c3af1 Mon Sep 17 00:00:00 2001
From: Matthias Hochmeister <matthias.hochmeister@apple.com>
Date: Thu, 26 Mar 2026 12:12:18 +0100
Subject: [PATCH] update

---
 .../components/admin/BannerManagementTab.tsx  |   8 +-
 .../src/components/admin/ServiceModeTab.tsx   |  10 +-
 .../VehicleBookingQuickAddWidget.tsx          |  17 ++-
 .../dashboard/VikunjaQuickAddWidget.tsx       |   8 +-
 .../src/components/shared/GermanDateField.tsx | 118 ++++++++++++++++++
 frontend/src/pages/BestellungDetail.tsx       |  11 +-
 frontend/src/pages/BookingFormPage.tsx        |  23 ++--
 frontend/src/pages/FahrzeugBuchungen.tsx      |  13 +-
 frontend/src/pages/FahrzeugDetail.tsx         |  24 ++--
 frontend/src/pages/FahrzeugForm.tsx           |  13 +-
 frontend/src/pages/Kalender.tsx               |  78 ++++--------
 frontend/src/pages/Veranstaltungen.tsx        |  10 +-
 12 files changed, 202 insertions(+), 131 deletions(-)
 create mode 100644 frontend/src/components/shared/GermanDateField.tsx

diff --git a/frontend/src/components/admin/BannerManagementTab.tsx b/frontend/src/components/admin/BannerManagementTab.tsx
index 31cda37..1a1fe71 100644
--- a/frontend/src/components/admin/BannerManagementTab.tsx
+++ b/frontend/src/components/admin/BannerManagementTab.tsx
@@ -25,6 +25,7 @@ import {
 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import AddIcon from '@mui/icons-material/Add';
+import GermanDateField from '../shared/GermanDateField';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { bannerApi } from '../../services/banners';
 import { useNotification } from '../../contexts/NotificationContext';
@@ -228,14 +229,13 @@ function BannerManagementTab() {
               <MenuItem value="widget">Widget</MenuItem>
             </Select>
           </FormControl>
-          <TextField
+          <GermanDateField
+            mode="datetime"
             margin="dense"
             label="Ablaufdatum (optional)"
-            type="datetime-local"
             fullWidth
             value={newEndsAt}
-            onChange={(e) => setNewEndsAt(e.target.value)}
-            InputLabelProps={{ shrink: true }}
+            onChange={(v) => setNewEndsAt(v)}
             helperText="Leer lassen für kein Ablaufdatum"
           />
         </DialogContent>
diff --git a/frontend/src/components/admin/ServiceModeTab.tsx b/frontend/src/components/admin/ServiceModeTab.tsx
index a9a1fb0..635efa4 100644
--- a/frontend/src/components/admin/ServiceModeTab.tsx
+++ b/frontend/src/components/admin/ServiceModeTab.tsx
@@ -4,6 +4,7 @@ import {
   TextField, Button, Alert, CircularProgress, Chip,
 } from '@mui/material';
 import BuildIcon from '@mui/icons-material/Build';
+import GermanDateField from '../shared/GermanDateField';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { settingsApi } from '../../services/settings';
 import { permissionsApi } from '../../services/permissions';
@@ -113,15 +114,14 @@ export default function ServiceModeTab() {
             helperText="Diese Nachricht sehen Benutzer auf der Wartungsseite."
           />
 
-          <TextField
+          <GermanDateField
+            mode="datetime"
             fullWidth
             label="Automatisch deaktivieren am"
-            type="datetime-local"
             value={endsAt}
-            onChange={(e) => setEndsAt(e.target.value)}
-            InputLabelProps={{ shrink: true }}
+            onChange={(v) => setEndsAt(v)}
             helperText="Optional: Wartungsmodus wird automatisch zu diesem Zeitpunkt deaktiviert."
-            sx={{ mb: 3, '& input': { color: 'text.primary' } }}
+            sx={{ mb: 3 }}
           />
 
           <Button
diff --git a/frontend/src/components/dashboard/VehicleBookingQuickAddWidget.tsx b/frontend/src/components/dashboard/VehicleBookingQuickAddWidget.tsx
index 0c463b9..b569c39 100644
--- a/frontend/src/components/dashboard/VehicleBookingQuickAddWidget.tsx
+++ b/frontend/src/components/dashboard/VehicleBookingQuickAddWidget.tsx
@@ -14,6 +14,7 @@ import {
   SelectChangeEvent,
 } from '@mui/material';
 import { DirectionsCar } from '@mui/icons-material';
+import GermanDateField from '../shared/GermanDateField';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { bookingApi, fetchVehicles } from '../../services/bookings';
 import type { CreateBuchungInput } from '../../types/booking.types';
@@ -141,28 +142,24 @@ const VehicleBookingQuickAddWidget: React.FC = () => {
               inputProps={{ maxLength: 250 }}
             />
 
-            <TextField
+            <GermanDateField
+              mode="datetime"
               fullWidth
               size="small"
               label="Beginn"
-              type="datetime-local"
               value={beginn}
-              onChange={(e) => setBeginn(e.target.value)}
+              onChange={(v) => setBeginn(v)}
               required
-              InputLabelProps={{ shrink: true }}
-              sx={{ '& input': { color: 'text.primary' } }}
             />
 
-            <TextField
+            <GermanDateField
+              mode="datetime"
               fullWidth
               size="small"
               label="Ende"
-              type="datetime-local"
               value={ende}
-              onChange={(e) => setEnde(e.target.value)}
+              onChange={(v) => setEnde(v)}
               required
-              InputLabelProps={{ shrink: true }}
-              sx={{ '& input': { color: 'text.primary' } }}
             />
 
             <TextField
diff --git a/frontend/src/components/dashboard/VikunjaQuickAddWidget.tsx b/frontend/src/components/dashboard/VikunjaQuickAddWidget.tsx
index e3aba5e..84cd3c3 100644
--- a/frontend/src/components/dashboard/VikunjaQuickAddWidget.tsx
+++ b/frontend/src/components/dashboard/VikunjaQuickAddWidget.tsx
@@ -14,6 +14,7 @@ import {
   SelectChangeEvent,
 } from '@mui/material';
 import { AddTask } from '@mui/icons-material';
+import GermanDateField from '../shared/GermanDateField';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { vikunjaApi } from '../../services/vikunja';
 import { useNotification } from '../../contexts/NotificationContext';
@@ -126,14 +127,13 @@ const VikunjaQuickAddWidget: React.FC = () => {
               inputProps={{ maxLength: 250 }}
             />
 
-            <TextField
+            <GermanDateField
+              mode="date"
               fullWidth
               size="small"
               label="Fälligkeitsdatum (optional)"
-              type="date"
               value={dueDate}
-              onChange={(e) => setDueDate(e.target.value)}
-              InputLabelProps={{ shrink: true }}
+              onChange={(v) => setDueDate(v)}
             />
 
             <Button
diff --git a/frontend/src/components/shared/GermanDateField.tsx b/frontend/src/components/shared/GermanDateField.tsx
new file mode 100644
index 0000000..8650dd8
--- /dev/null
+++ b/frontend/src/components/shared/GermanDateField.tsx
@@ -0,0 +1,118 @@
+import { useState, useRef } from 'react';
+import TextField, { type TextFieldProps } from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import IconButton from '@mui/material/IconButton';
+import Box from '@mui/material/Box';
+import CalendarMonth from '@mui/icons-material/CalendarMonth';
+import {
+  toGermanDate,
+  toGermanDateTime,
+  fromGermanDate,
+  fromGermanDateTime,
+} from '../../utils/dateInput';
+
+export type GermanDateMode = 'date' | 'datetime';
+
+export interface GermanDateFieldProps extends Omit<TextFieldProps, 'value' | 'onChange' | 'type'> {
+  /** ISO date (YYYY-MM-DD) or datetime (YYYY-MM-DDTHH:MM) string */
+  value?: string | null;
+  /** Called with ISO date/datetime string whenever value changes to a valid date */
+  onChange?: (isoValue: string) => void;
+  mode?: GermanDateMode;
+}
+
+/**
+ * A MUI TextField that:
+ *  - Displays dates in German format (TT.MM.JJJJ / TT.MM.JJJJ HH:MM)
+ *  - Accepts free-text entry in that format
+ *  - Has a calendar icon that opens the native browser date picker as a popup
+ *  - onChange fires with an ISO string whenever the entered value is valid
+ */
+export default function GermanDateField({
+  value,
+  onChange,
+  mode = 'date',
+  sx,
+  ...rest
+}: GermanDateFieldProps) {
+  // localValue overrides the displayed text while the user is typing
+  const [localValue, setLocalValue] = useState<string | null>(null);
+  const hiddenRef = useRef<HTMLInputElement>(null);
+
+  const displayed =
+    localValue ?? (mode === 'date' ? toGermanDate(value) : toGermanDateTime(value));
+
+  function handleTextChange(raw: string) {
+    setLocalValue(raw);
+    const iso = mode === 'date' ? fromGermanDate(raw) : fromGermanDateTime(raw);
+    if (iso) {
+      onChange?.(iso);
+      setLocalValue(null);
+    }
+  }
+
+  function handleBlur() {
+    // Revert to the last valid formatted value if the text is incomplete
+    setLocalValue(null);
+  }
+
+  function handlePickerChange(nativeVal: string) {
+    if (!nativeVal) return;
+    if (mode === 'date') {
+      onChange?.(nativeVal);
+    } else {
+      // Preserve current time portion if available, default to 08:00
+      const time = value?.substring(11, 16) || '08:00';
+      onChange?.(`${nativeVal}T${time}`);
+    }
+  }
+
+  const nativeValue =
+    mode === 'date' ? (value?.substring(0, 10) || '') : (value?.substring(0, 16) || '');
+
+  return (
+    <Box sx={{ position: 'relative', display: 'inline-flex', width: rest.fullWidth ? '100%' : undefined, ...sx }}>
+      <TextField
+        {...rest}
+        sx={{ width: '100%' }}
+        value={displayed}
+        onChange={(e) => handleTextChange(e.target.value)}
+        onBlur={handleBlur}
+        placeholder={mode === 'date' ? 'TT.MM.JJJJ' : 'TT.MM.JJJJ HH:MM'}
+        InputLabelProps={{ shrink: true, ...rest.InputLabelProps }}
+        InputProps={{
+          endAdornment: (
+            <InputAdornment position="end">
+              <IconButton
+                size="small"
+                tabIndex={-1}
+                edge="end"
+                onClick={() => hiddenRef.current?.showPicker?.()}
+              >
+                <CalendarMonth fontSize="small" />
+              </IconButton>
+            </InputAdornment>
+          ),
+          ...rest.InputProps,
+        }}
+      />
+      {/* Hidden native input used solely to open the browser's date picker popup */}
+      <input
+        ref={hiddenRef}
+        type={mode === 'date' ? 'date' : 'datetime-local'}
+        value={nativeValue}
+        onChange={(e) => handlePickerChange(e.target.value)}
+        tabIndex={-1}
+        style={{
+          position: 'absolute',
+          bottom: 0,
+          left: 0,
+          opacity: 0,
+          width: '100%',
+          height: '100%',
+          pointerEvents: 'none',
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/frontend/src/pages/BestellungDetail.tsx b/frontend/src/pages/BestellungDetail.tsx
index 937e06f..db6715e 100644
--- a/frontend/src/pages/BestellungDetail.tsx
+++ b/frontend/src/pages/BestellungDetail.tsx
@@ -47,6 +47,7 @@ import {
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useParams, useNavigate } from 'react-router-dom';
 import DashboardLayout from '../components/dashboard/DashboardLayout';
+import GermanDateField from '../components/shared/GermanDateField';
 import { useNotification } from '../contexts/NotificationContext';
 import { usePermissionContext } from '../contexts/PermissionContext';
 import { bestellungApi } from '../services/bestellung';
@@ -417,11 +418,11 @@ export default function BestellungDetail() {
       curY += 3;
     }
 
-    // ── Besteller block ──
+    // ── Kontaktperson (Besteller) block ──
     if (bestellung.besteller_name) {
       doc.setFontSize(10);
       doc.setFont('helvetica', 'bold');
-      doc.text('Besteller', 10, curY);
+      doc.text('Kontaktperson', 10, curY);
       curY += 5;
       const nameWithRank = bestellung.besteller_dienstgrad
         ? `${kurzDienstgrad(bestellung.besteller_dienstgrad)} ${bestellung.besteller_name}`
@@ -1012,13 +1013,11 @@ export default function BestellungDetail() {
         {/* Inline Add Reminder Form */}
         {reminderFormOpen && (
           <Box sx={{ display: 'flex', gap: 1, mt: 2, alignItems: 'flex-end' }}>
-            <TextField
+            <GermanDateField
               size="small"
-              type="date"
               label="Fällig am"
-              InputLabelProps={{ shrink: true }}
               value={reminderForm.faellig_am}
-              onChange={(e) => setReminderForm((f) => ({ ...f, faellig_am: e.target.value }))}
+              onChange={(iso) => setReminderForm((f) => ({ ...f, faellig_am: iso }))}
             />
             <TextField
               size="small"
diff --git a/frontend/src/pages/BookingFormPage.tsx b/frontend/src/pages/BookingFormPage.tsx
index 178637c..5528ae4 100644
--- a/frontend/src/pages/BookingFormPage.tsx
+++ b/frontend/src/pages/BookingFormPage.tsx
@@ -31,6 +31,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useParams, useNavigate } from 'react-router-dom';
 import DashboardLayout from '../components/dashboard/DashboardLayout';
 import ServiceModePage from '../components/shared/ServiceModePage';
+import GermanDateField from '../components/shared/GermanDateField';
 import { usePermissionContext } from '../contexts/PermissionContext';
 import { useNotification } from '../contexts/NotificationContext';
 import { bookingApi, fetchVehicles, kategorieApi } from '../services/bookings';
@@ -286,51 +287,49 @@ function BookingFormPage() {
 
                 <Grid container spacing={2}>
                   <Grid item xs={12} sm={6}>
-                    <TextField
+                    <GermanDateField
                       fullWidth
                       size="small"
                       label="Beginn"
-                      type={form.ganztaegig ? 'date' : 'datetime-local'}
                       required
+                      mode={form.ganztaegig ? 'date' : 'datetime'}
                       value={
                         form.ganztaegig
                           ? form.beginn?.split('T')[0] || ''
                           : form.beginn
                       }
-                      onChange={(e) => {
+                      onChange={(iso) => {
                         if (form.ganztaegig) {
                           setForm((f) => ({
                             ...f,
-                            beginn: `${e.target.value}T00:00`,
+                            beginn: `${iso}T00:00`,
                           }));
                         } else {
-                          setForm((f) => ({ ...f, beginn: e.target.value }));
+                          setForm((f) => ({ ...f, beginn: iso }));
                         }
                       }}
-                      InputLabelProps={{ shrink: true }}
                     />
                   </Grid>
                   <Grid item xs={12} sm={6}>
-                    <TextField
+                    <GermanDateField
                       fullWidth
                       size="small"
                       label="Ende"
-                      type={form.ganztaegig ? 'date' : 'datetime-local'}
                       required
+                      mode={form.ganztaegig ? 'date' : 'datetime'}
                       value={
                         form.ganztaegig ? form.ende?.split('T')[0] || '' : form.ende
                       }
-                      onChange={(e) => {
+                      onChange={(iso) => {
                         if (form.ganztaegig) {
                           setForm((f) => ({
                             ...f,
-                            ende: `${e.target.value}T23:59`,
+                            ende: `${iso}T23:59`,
                           }));
                         } else {
-                          setForm((f) => ({ ...f, ende: e.target.value }));
+                          setForm((f) => ({ ...f, ende: iso }));
                         }
                       }}
-                      InputLabelProps={{ shrink: true }}
                     />
                   </Grid>
                 </Grid>
diff --git a/frontend/src/pages/FahrzeugBuchungen.tsx b/frontend/src/pages/FahrzeugBuchungen.tsx
index fafa48e..3c0b944 100644
--- a/frontend/src/pages/FahrzeugBuchungen.tsx
+++ b/frontend/src/pages/FahrzeugBuchungen.tsx
@@ -48,6 +48,7 @@ import { useNavigate } from 'react-router-dom';
 import { format, parseISO } from 'date-fns';
 import DashboardLayout from '../components/dashboard/DashboardLayout';
 import ChatAwareFab from '../components/shared/ChatAwareFab';
+import GermanDateField from '../components/shared/GermanDateField';
 import ServiceModePage from '../components/shared/ServiceModePage';
 import { useAuth } from '../contexts/AuthContext';
 import { usePermissionContext } from '../contexts/PermissionContext';
@@ -262,22 +263,18 @@ function FahrzeugBuchungen() {
             {/* Filters */}
             <Paper sx={{ p: 2, mb: 2 }}>
               <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} alignItems="center">
-                <TextField
+                <GermanDateField
                   size="small"
                   label="Von"
-                  type="date"
                   value={filterFrom}
-                  onChange={(e) => setFilterFrom(e.target.value)}
-                  InputLabelProps={{ shrink: true }}
+                  onChange={(iso) => setFilterFrom(iso)}
                   sx={{ minWidth: 160 }}
                 />
-                <TextField
+                <GermanDateField
                   size="small"
                   label="Bis"
-                  type="date"
                   value={filterTo}
-                  onChange={(e) => setFilterTo(e.target.value)}
-                  InputLabelProps={{ shrink: true }}
+                  onChange={(iso) => setFilterTo(iso)}
                   sx={{ minWidth: 160 }}
                 />
                 <FormControl size="small" sx={{ minWidth: 180 }}>
diff --git a/frontend/src/pages/FahrzeugDetail.tsx b/frontend/src/pages/FahrzeugDetail.tsx
index dc7d600..c3cc3dd 100644
--- a/frontend/src/pages/FahrzeugDetail.tsx
+++ b/frontend/src/pages/FahrzeugDetail.tsx
@@ -57,6 +57,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import DashboardLayout from '../components/dashboard/DashboardLayout';
 import ChatAwareFab from '../components/shared/ChatAwareFab';
 import { vehiclesApi } from '../services/vehicles';
+import GermanDateField from '../components/shared/GermanDateField';
 import { fromGermanDate } from '../utils/dateInput';
 import { equipmentApi } from '../services/equipment';
 import {
@@ -404,23 +405,21 @@ const UebersichtTab: React.FC<UebersichtTabProps> = ({ vehicle, onStatusUpdated,
 
           {isAusserDienst(newStatus) && (
             <>
-              <TextField
+              <GermanDateField
                 label="Außer Dienst von *"
-                type="datetime-local"
+                mode="datetime"
                 fullWidth
                 sx={{ mb: 2 }}
                 value={ausserDienstVon}
-                onChange={(e) => setAusserDienstVon(e.target.value)}
-                InputLabelProps={{ shrink: true }}
+                onChange={(iso) => setAusserDienstVon(iso)}
               />
-              <TextField
+              <GermanDateField
                 label="Geschätztes Ende *"
-                type="datetime-local"
+                mode="datetime"
                 fullWidth
                 sx={{ mb: 1 }}
                 value={ausserDienstBis}
-                onChange={(e) => setAusserDienstBis(e.target.value)}
-                InputLabelProps={{ shrink: true }}
+                onChange={(iso) => setAusserDienstBis(iso)}
               />
               <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 2 }}>
                 Zeitangabe ist eine Schätzung
@@ -717,13 +716,12 @@ const WartungTab: React.FC<WartungTabProps> = ({ fahrzeugId, wartungslog, onAdde
               </FormControl>
             </Grid>
             <Grid item xs={12} sm={6}>
-              <TextField
+              <GermanDateField
                 label="Nächste Fälligkeit"
-                type="date"
+                mode="date"
                 fullWidth
-                value={form.naechste_faelligkeit ?? ''}
-                onChange={(e) => setForm((f) => ({ ...f, naechste_faelligkeit: e.target.value }))}
-                InputLabelProps={{ shrink: true }}
+                value={form.naechste_faelligkeit || null}
+                onChange={(iso) => setForm((f) => ({ ...f, naechste_faelligkeit: iso }))}
               />
             </Grid>
           </Grid>
diff --git a/frontend/src/pages/FahrzeugForm.tsx b/frontend/src/pages/FahrzeugForm.tsx
index f5be9de..09aac5f 100644
--- a/frontend/src/pages/FahrzeugForm.tsx
+++ b/frontend/src/pages/FahrzeugForm.tsx
@@ -13,6 +13,7 @@ import {
 import { ArrowBack, Save } from '@mui/icons-material';
 import { useNavigate, useParams } from 'react-router-dom';
 import DashboardLayout from '../components/dashboard/DashboardLayout';
+import GermanDateField from '../components/shared/GermanDateField';
 import { vehiclesApi } from '../services/vehicles';
 import {
   CreateFahrzeugPayload,
@@ -272,24 +273,20 @@ function FahrzeugForm() {
           <Typography variant="h6" gutterBottom sx={{ mt: 3 }}>Prüf- und Wartungsfristen</Typography>
           <Grid container spacing={2}>
             <Grid item xs={12} sm={6}>
-              <TextField
+              <GermanDateField
                 label="§57a fällig am"
                 fullWidth
-                type="date"
                 value={form.paragraph57a_faellig_am}
-                onChange={(e) => setForm((prev) => ({ ...prev, paragraph57a_faellig_am: e.target.value }))}
-                InputLabelProps={{ shrink: true }}
+                onChange={(iso) => setForm((prev) => ({ ...prev, paragraph57a_faellig_am: iso }))}
                 helperText="Periodische Begutachtung (§57a StVO)"
               />
             </Grid>
             <Grid item xs={12} sm={6}>
-              <TextField
+              <GermanDateField
                 label="Nächste Wartung am"
                 fullWidth
-                type="date"
                 value={form.naechste_wartung_am}
-                onChange={(e) => setForm((prev) => ({ ...prev, naechste_wartung_am: e.target.value }))}
-                InputLabelProps={{ shrink: true }}
+                onChange={(iso) => setForm((prev) => ({ ...prev, naechste_wartung_am: iso }))}
                 helperText="Nächster geplanter Servicetermin"
               />
             </Grid>
diff --git a/frontend/src/pages/Kalender.tsx b/frontend/src/pages/Kalender.tsx
index db03b25..75f02a6 100644
--- a/frontend/src/pages/Kalender.tsx
+++ b/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>
diff --git a/frontend/src/pages/Veranstaltungen.tsx b/frontend/src/pages/Veranstaltungen.tsx
index d6b58bd..f0c70b0 100644
--- a/frontend/src/pages/Veranstaltungen.tsx
+++ b/frontend/src/pages/Veranstaltungen.tsx
@@ -52,6 +52,7 @@ import {
 } from '@mui/icons-material';
 import DashboardLayout from '../components/dashboard/DashboardLayout';
 import ChatAwareFab from '../components/shared/ChatAwareFab';
+import GermanDateField from '../components/shared/GermanDateField';
 import { toGermanDate, toGermanDateTime, fromGermanDate, fromGermanDateTime } from '../utils/dateInput';
 import { usePermissionContext } from '../contexts/PermissionContext';
 import { useNotification } from '../contexts/NotificationContext';
@@ -1016,16 +1017,15 @@ function EventFormDialog({
                     </FormControl>
                   )}
 
-                  <TextField
+                  <GermanDateField
                     label="Wiederholen bis"
-                    type="date"
                     size="small"
+                    mode="date"
                     value={form.wiederholung.bis}
-                    onChange={(e) => {
-                      const w = { ...form.wiederholung!, bis: e.target.value };
+                    onChange={(iso) => {
+                      const w = { ...form.wiederholung!, bis: iso };
                       handleChange('wiederholung', w);
                     }}
-                    InputLabelProps={{ shrink: true }}
                     fullWidth
                     helperText="Enddatum der Wiederholungsserie"
                   />