diff --git a/components/LogbuchForm.tsx b/components/LogbuchForm.tsx index 0b05494..52c12f6 100644 --- a/components/LogbuchForm.tsx +++ b/components/LogbuchForm.tsx @@ -250,6 +250,7 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved setEnde(ende.slice(0, 10) + 'T' + t)} + clearOnFocus className="w-24" /> diff --git a/components/TimeInput.tsx b/components/TimeInput.tsx index 91e9408..73696ed 100644 --- a/components/TimeInput.tsx +++ b/components/TimeInput.tsx @@ -6,6 +6,7 @@ interface Props { value: string; // "HH:MM" onChange: (value: string) => void; className?: string; + clearOnFocus?: boolean; } function isValid(t: string): boolean { @@ -19,7 +20,7 @@ function normalize(t: string): string { return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`; } -export default function TimeInput({ value, onChange, className = '' }: Props) { +export default function TimeInput({ value, onChange, className = '', clearOnFocus = false }: Props) { const [local, setLocal] = useState(value); const [error, setError] = useState(false); @@ -28,7 +29,29 @@ export default function TimeInput({ value, onChange, className = '' }: Props) { setError(false); }, [value]); + function handleChange(raw: string) { + setError(false); + // Auto-insert colon after the 2nd digit (only when adding, not deleting) + if (/^\d{2}$/.test(raw) && /^\d$/.test(local)) { + setLocal(raw + ':'); + return; + } + setLocal(raw); + } + + function handleFocus() { + if (clearOnFocus) { + setLocal(''); + setError(false); + } + } + function handleBlur() { + if (local === '') { + setLocal(value); + setError(false); + return; + } if (isValid(local)) { const norm = normalize(local); setLocal(norm); @@ -43,10 +66,13 @@ export default function TimeInput({ value, onChange, className = '' }: Props) {
{ setLocal(e.target.value); setError(false); }} + onChange={(e) => handleChange(e.target.value)} + onFocus={handleFocus} onBlur={handleBlur} placeholder="HH:MM" + maxLength={5} className={`w-full px-2 py-1 border-2 rounded-lg bg-white text-sm text-gray-900 font-mono text-center focus:outline-none ${ error ? 'border-red-500 focus:border-red-500' : 'border-gray-400 focus:border-blue-500' }`} diff --git a/package.json b/package.json index 5143c86..2891e35 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "logbuch", - "version": "1.6.1", + "version": "1.6.2", "private": true, "scripts": { "dev": "next dev",