feat: use German date format (dd.mm.yyyy) with auto-dot insertion
Replace native date picker (mm/dd/yyyy) with a plain text input that auto-inserts dots as the user types (20122026 → 20.12.2026). A hidden field transforms the display value back to ISO (yyyy-mm-dd) before the form is submitted to the backend. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -11,6 +11,38 @@
|
||||
let tags = doc.tags ? doc.tags.map((t: any) => t.name) : [];
|
||||
let senderId = doc.sender?.id ?? '';
|
||||
let selectedReceivers = doc.receivers ?? [];
|
||||
|
||||
function isoToGerman(iso: string): string {
|
||||
if (!iso || !/^\d{4}-\d{2}-\d{2}$/.test(iso)) return '';
|
||||
const [y, m, d] = iso.split('-');
|
||||
return `${d}.${m}.${y}`;
|
||||
}
|
||||
|
||||
function germanToIso(german: string): string {
|
||||
const match = german.match(/^(\d{2})\.(\d{2})\.(\d{4})$/);
|
||||
if (!match) return '';
|
||||
const [, d, m, y] = match;
|
||||
return `${y}-${m}-${d}`;
|
||||
}
|
||||
|
||||
let dateDisplay = isoToGerman(doc.documentDate ?? '');
|
||||
let dateIso = doc.documentDate ?? '';
|
||||
|
||||
function handleDateInput(e: Event) {
|
||||
const input = e.target as HTMLInputElement;
|
||||
const digits = input.value.replace(/\D/g, '').slice(0, 8);
|
||||
let formatted: string;
|
||||
if (digits.length <= 2) {
|
||||
formatted = digits;
|
||||
} else if (digits.length <= 4) {
|
||||
formatted = `${digits.slice(0, 2)}.${digits.slice(2)}`;
|
||||
} else {
|
||||
formatted = `${digits.slice(0, 2)}.${digits.slice(2, 4)}.${digits.slice(4)}`;
|
||||
}
|
||||
input.value = formatted;
|
||||
dateDisplay = formatted;
|
||||
dateIso = germanToIso(formatted);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="max-w-4xl mx-auto py-8 px-4">
|
||||
@@ -45,11 +77,15 @@
|
||||
<label for="documentDate" class="block text-sm font-medium text-gray-700 mb-1">Datum</label>
|
||||
<input
|
||||
id="documentDate"
|
||||
type="date"
|
||||
name="documentDate"
|
||||
value={doc.documentDate || ''}
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
value={dateDisplay}
|
||||
on:input={handleDateInput}
|
||||
placeholder="TT.MM.JJJJ"
|
||||
maxlength="10"
|
||||
class="block w-full rounded border-gray-300 shadow-sm p-2 border focus:border-brand-navy focus:ring-brand-navy text-sm"
|
||||
/>
|
||||
<input type="hidden" name="documentDate" value={dateIso} />
|
||||
</div>
|
||||
|
||||
<!-- Ort -->
|
||||
|
||||
Reference in New Issue
Block a user