Constrain date inputs to 4-digit years (fixes yyyyyy-mm-dd display)
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:
@@ -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()}
|
||||
|
||||
Reference in New Issue
Block a user