+
Date Input Validation Tests
+
+ Testing: Required field validation (red border) after blur. Format: YYYY/MM/DD
+
+
+
+
+ {/* Grid Layout for Examples */}
+
+
+ {/* 1. Required Standalone */}
+
+
1️⃣ Required (Standalone)
+
{ setRequiredValue(e.detail ?? ''); addLog(`1️⃣ Value: "${e.detail ?? 'empty'}"`); }}
+ onFocus={() => { addLog('1️⃣ Focus'); setTimeout(() => debugValidationState(requiredRef, '1️⃣ FOCUS'), 10); }}
+ onBlur={() => { addLog('1️⃣ Blur'); setTimeout(() => debugValidationState(requiredRef, '1️⃣ BLUR'), 100); }}
+ />
+
+
+
+
+
+
+
+
+
+ {/* 2. Optional Standalone */}
+
+
2️⃣ Optional (Standalone)
+
{ setOptionalValue(e.detail ?? ''); addLog(`2️⃣ Value: "${e.detail ?? 'empty'}"`); }}
+ onFocus={() => { addLog('2️⃣ Focus'); setTimeout(() => debugValidationState(optionalRef, '2️⃣ FOCUS'), 10); }}
+ onBlur={() => { addLog('2️⃣ Blur'); setTimeout(() => debugValidationState(optionalRef, '2️⃣ BLUR'), 100); }}
+ />
+
+
+
+
+
+
+
+
+
+ {/* 3. Form Required */}
+
+
3️⃣ Required (In Form)
+
+
+
+ {/* 4. Form Optional */}
+
+
4️⃣ Optional (In Form)
+
+
+
+ {/* 5. NoValidate Required */}
+
+
5️⃣ Required (NoValidate Form)
+
+
+
+ {/* 6. NoValidate Optional */}
+
+
6️⃣ Optional (NoValidate Form)
+
+
+
+
{/* End of grid */}
+
+ {/* Event Log */}
+
+
🪵 Event Log
+
+ {logs.length === 0 ? (
+
No events yet... Interact with fields above
+ ) : (
+ logs.map((log) => {
+ const isError = log.message.includes('❌');
+ const isDebug = log.message.includes('BLUR') || log.message.includes('FOCUS') || log.message.includes('MANUAL');
+ let logColor = 'inherit';
+ if (isError) {
+ logColor = '#d32f2f';
+ } else if (isDebug) {
+ logColor = '#1976d2';
+ }
+
+ return (
+
+ {log.message}
+
+ );
+ })
+ )}
+
+
+