From 18601db4f8d8965283c2406cf615ed8b322ca156 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 20 Mar 2026 23:18:40 +0100
Subject: [PATCH] fix(profile): use dd.mm.yyyy date input for birth date field

Replace the browser-native type="date" picker with a text input using
the same german format (dd.mm.yyyy with auto-dot insertion) as the
document date fields. A hidden input sends the ISO value to the server.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/profile/+page.svelte | 41 ++++++++++++++++++++++--
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/frontend/src/routes/profile/+page.svelte b/frontend/src/routes/profile/+page.svelte
index db9e1ee4..6cb15754 100644
--- a/frontend/src/routes/profile/+page.svelte
+++ b/frontend/src/routes/profile/+page.svelte
@@ -1,8 +1,41 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
+import { untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
 
 let { data, form } = $props();
+
+function isoToGerman(iso: string | undefined): string {
+	if (!iso) return '';
+	const match = iso.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+	if (!match) return '';
+	return `${match[3]}.${match[2]}.${match[1]}`;
+}
+
+function germanToIso(german: string): string {
+	const match = german.match(/^(\d{2})\.(\d{2})\.(\d{4})$/);
+	if (!match) return '';
+	return `${match[3]}-${match[2]}-${match[1]}`;
+}
+
+let birthDateDisplay = $state(untrack(() => isoToGerman(data.user?.birthDate)));
+let birthDateIso = $state(untrack(() => data.user?.birthDate ?? ''));
+
+function handleBirthDateInput(e: Event) {
+	const input = e.target as HTMLInputElement;
+	const digits = input.value.replace(/\D/g, '').slice(0, 8);
+	let formatted: string;
+	if (digits.length <= 2) {
+		formatted = digits;
+	} else if (digits.length <= 4) {
+		formatted = `${digits.slice(0, 2)}.${digits.slice(2)}`;
+	} else {
+		formatted = `${digits.slice(0, 2)}.${digits.slice(2, 4)}.${digits.slice(4)}`;
+	}
+	input.value = formatted;
+	birthDateDisplay = formatted;
+	birthDateIso = germanToIso(formatted);
+}
 </script>
 
 <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
@@ -80,11 +113,13 @@ let { data, form } = $props();
 							{m.profile_label_birth_date()}
 						</span>
 						<input
-							type="date"
-							name="birthDate"
-							value={data.user?.birthDate ?? ''}
+							type="text"
+							placeholder="TT.MM.JJJJ"
+							value={birthDateDisplay}
+							oninput={handleBirthDateInput}
 							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 						/>
+						<input type="hidden" name="birthDate" value={birthDateIso} />
 					</label>
 
 					<label class="block">