ebeb0cf865
Some checks failed
CI / Unit & Component Tests (pull_request) Failing after 1m30s
CI / Backend Unit Tests (pull_request) Failing after 2m28s
CI / E2E Tests (pull_request) Failing after 1h48m30s
CI / Unit & Component Tests (push) Failing after 1m45s
CI / Backend Unit Tests (push) Failing after 2m34s
CI / E2E Tests (push) Failing after 1h47m38s
Resolved conflicts: - messages/de|en|es.json: kept all keys from both sides - DateInput.svelte: kept HEAD API (onchange, not oninput/...rest) to match CorrespondenzFilterControls caller; incorporated main's isCalendarValid helper Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
80 lines
1.9 KiB
Svelte
80 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import { isoToGerman, handleGermanDateInput, germanToIso } from '$lib/utils/date';
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
|
|
interface Props {
|
|
value?: string;
|
|
errorMessage?: string | null;
|
|
name?: string;
|
|
id?: string;
|
|
placeholder?: string;
|
|
class?: string;
|
|
onchange?: () => void;
|
|
}
|
|
|
|
let {
|
|
value = $bindable(''),
|
|
errorMessage = $bindable<string | null>(null),
|
|
name,
|
|
id,
|
|
placeholder,
|
|
class: className = '',
|
|
onchange
|
|
}: Props = $props();
|
|
|
|
let display = $state(isoToGerman(value ?? ''));
|
|
|
|
// ─── Validation helper ────────────────────────────────────────────────────
|
|
function isCalendarValid(iso: string): boolean {
|
|
if (!iso) return false;
|
|
const [, mm, dd] = iso.match(/^\d{4}-(\d{2})-(\d{2})$/) ?? [];
|
|
const month = parseInt(mm, 10);
|
|
const day = parseInt(dd, 10);
|
|
return month >= 1 && month <= 12 && day >= 1 && day <= 31;
|
|
}
|
|
|
|
// ─── Input handler ────────────────────────────────────────────────────────
|
|
function handleInput(e: Event) {
|
|
const result = handleGermanDateInput(e);
|
|
display = result.display;
|
|
|
|
if (result.display === '') {
|
|
value = '';
|
|
errorMessage = null;
|
|
onchange?.();
|
|
return;
|
|
}
|
|
|
|
if (result.display.length < 10) {
|
|
value = '';
|
|
errorMessage = m.form_date_error();
|
|
return;
|
|
}
|
|
|
|
const iso = germanToIso(result.display);
|
|
if (!iso || !isCalendarValid(iso)) {
|
|
value = '';
|
|
errorMessage = m.form_date_error();
|
|
return;
|
|
}
|
|
|
|
value = iso;
|
|
errorMessage = null;
|
|
onchange?.();
|
|
}
|
|
</script>
|
|
|
|
<input
|
|
type="text"
|
|
inputmode="numeric"
|
|
maxlength="10"
|
|
id={id}
|
|
value={display}
|
|
placeholder={placeholder ?? m.form_placeholder_date()}
|
|
oninput={handleInput}
|
|
class={className}
|
|
/>
|
|
{#if name}
|
|
<input type="hidden" name={name} value={value} />
|
|
{/if}
|