Constrain date inputs to 4-digit years (fixes yyyyyy-mm-dd display)
Deploy to LXC / deploy (push) Successful in 1m56s
Validate / validate (push) Successful in 33s

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>
This commit is contained in:
2026-04-20 16:16:18 +07:00
parent 8376116765
commit 6d0fb30545
+17
View File
@@ -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()}