fix(book): add inline validation for date input format (GRO-266)
Date picker now shows a clear error when the value doesn't match YYYY-MM-DD, instead of silently failing with a browser console warning. Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -108,6 +108,7 @@ export function BookPage() {
|
|||||||
|
|
||||||
// Step 2 — date & time
|
// Step 2 — date & time
|
||||||
const [date, setDate] = useState(todayIso());
|
const [date, setDate] = useState(todayIso());
|
||||||
|
const [dateError, setDateError] = useState<string | null>(null);
|
||||||
const [slots, setSlots] = useState<string[]>([]);
|
const [slots, setSlots] = useState<string[]>([]);
|
||||||
const [slotsLoading, setSlotsLoading] = useState(false);
|
const [slotsLoading, setSlotsLoading] = useState(false);
|
||||||
const [selectedSlot, setSelectedSlot] = useState<string | null>(null);
|
const [selectedSlot, setSelectedSlot] = useState<string | null>(null);
|
||||||
@@ -351,8 +352,21 @@ export function BookPage() {
|
|||||||
value={date}
|
value={date}
|
||||||
min={todayIso()}
|
min={todayIso()}
|
||||||
style={{ ...input, width: "auto" }}
|
style={{ ...input, width: "auto" }}
|
||||||
onChange={(e) => setDate(e.target.value)}
|
onChange={(e) => {
|
||||||
|
const val = e.target.value;
|
||||||
|
// HTML5 date input enforces yyyy-MM-dd; empty value means invalid format
|
||||||
|
if (!val) {
|
||||||
|
setDateError("Please enter a valid date (YYYY-MM-DD).");
|
||||||
|
setDate("");
|
||||||
|
} else {
|
||||||
|
setDateError(null);
|
||||||
|
setDate(val);
|
||||||
|
}
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
|
{dateError && (
|
||||||
|
<p style={{ color: "#dc2626", fontSize: 12, marginTop: 4 }}>{dateError}</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style={{ marginBottom: "1.25rem" }}>
|
<div style={{ marginBottom: "1.25rem" }}>
|
||||||
|
|||||||
Reference in New Issue
Block a user