v1.6.2: Zeiteingabe – Auto-Doppelpunkt nach 2 Ziffern, Endzeit leer bei Fokus

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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) {
     <div className={`relative ${className}`}>
       <input
         type="text"
+        inputMode="numeric"
         value={local}
-        onChange={(e) => { 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'
         }`}