Date Picker
Expose a calendar modal for selecting dates and times.
Date
Pick a date.
Important! Only use date pickers for dates that are in the near future or past. They create usability issues for distant dates (like birthday).
<label for="start">When will you arrive?</label>
<div class="flex">
<input type="date" id="start" name="start">
</div>Time
Pick a time.
<label for="reservation">Reservation Time</label>
<div class="flex">
<input type="time" id="reservation" name="reservation">
</div>Date/Time
Pick a date and time.
Important! Only use date pickers for dates that are in the near future or past. They create usability issues for distant dates (like birthday).
<label for="reservation">Book an Appointment</label>
<div class="flex">
<input type="datetime-local" id="appointment" name="appointment">
</div>Formatting Issues
In Safari (particularly on mobile), date and time inputs often do not respect their parent containers and will appear wider than other fields or overflow their parent.
Wrapping them in a parent element with a flexbox layout (like the .flex class) fixes this.
<!-- Fix Safari Formatting -->
<div class="flex">
<input type="date" id="start" name="start">
</div>