From 6d0fb30545c36ec61ee75b614ff06a67601b7835 Mon Sep 17 00:00:00 2001
From: grabowski <berwn@buildfor.life>
Date: Mon, 20 Apr 2026 16:16:18 +0700
Subject: [PATCH] Constrain date inputs to 4-digit years (fixes yyyyyy-mm-dd
 display)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Chrome/Blink renders <input type="date"> with a 6-digit year field
unless min/max attributes restrict the range. Added a root-layout
hook that auto-sets min=1900-01-01, max=2100-12-31 on every date
input on mount and after navigation — no need to edit 19 form files.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/routes/+layout.svelte | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b93e9ba..224cf8a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,24 @@
 <script lang="ts">
 	import '../app.css';
+	import { afterNavigate } from '$app/navigation';
+	import { onMount } from 'svelte';
 
 	let { children } = $props();
+
+	// Constrain date inputs so browsers don't render yyyyyy-mm-dd
+	function constrainDateInputs() {
+		document.querySelectorAll<HTMLInputElement>('input[type="date"]').forEach((el) => {
+			if (!el.hasAttribute('min')) el.setAttribute('min', '1900-01-01');
+			if (!el.hasAttribute('max')) el.setAttribute('max', '2100-12-31');
+		});
+	}
+
+	onMount(() => {
+		constrainDateInputs();
+	});
+	afterNavigate(() => {
+		queueMicrotask(constrainDateInputs);
+	});
 </script>
 
 {@render children()}