Date pickers: keep typing primary; calendar optional

Checklist

• Let people type. One input is often the fastest and most accessible path.
• Give a clear format hint near the field (e.g., YYYY-MM-DD), not just a placeholder.
• Make the calendar optional. If you provide an “Open calendar” button, don’t require it.
• Don’t trap focus in a calendar overlay unless it’s truly a modal and you implement a proper modal focus trap.
• Always provide an escape hatch: a visible Close button and Esc to close the overlay.
• Return focus predictably to the element that opened the calendar (usually the button).
• Announce selection politely (e.g., via role="status" / aria-live="polite") so screen reader users get confirmation without losing their place.
• Validate gently. If the date is invalid, give a short error and link it with aria-describedby.
• Keep touch targets comfortable for day buttons if you show a calendar grid.

Native vs custom

If you can use a native control (<input type="date">) in your target browsers, that can be a win. If you need a custom UI, the key is to keep typing supported and make the calendar a helper.

<label for="pickup">Pickup date</label>
<input id="pickup" name="pickup_date" inputmode="numeric"
       aria-describedby="pickupHelp" placeholder="YYYY-MM-DD">
<div id="pickupHelp">Format: YYYY-MM-DD. You can type or open the calendar.</div>
<button type="button" aria-haspopup="dialog" aria-controls="calendar">Open calendar</button>
<div id="calendar" role="dialog" aria-modal="false" hidden>...</div>