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>
<input type="date" id="start" name="start">Time
Pick a time.
<label for="reservation">Reservation Time</label>
<input type="time" id="reservation" name="reservation">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>
<input type="datetime-local" id="appointment" name="appointment">