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">
|
<script lang="ts">
|
||||||
import '../app.css';
|
import '../app.css';
|
||||||
|
import { afterNavigate } from '$app/navigation';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
let { children } = $props();
|
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>
|
</script>
|
||||||
|
|
||||||
{@render children()}
|
{@render children()}
|
||||||
|
|||||||
Reference in New Issue
Block a user