Back to the catalog

Date and time pickers

Forms & Interactive Controls

<input type="date"> and <input type="time">

Baseline widely availablederived from web-features, captured 2026-09-06
  • Chrome20
  • Edge12
  • Firefox57
  • Safari14.1

Features it needs

A date-picker library ships its own calendar grid, keyboard navigation, and locale formatting, all as JavaScript and CSS you maintain. The browser already has a calendar and clock picker built in: type="date" and type="time" give you locale-aware formatting, keyboard entry, and min/max validation with a single attribute, and the picker UI itself never needs styling because you never render it.

When this applies

Collecting a single date or time value from a form.

The native approach

<input type="date"> and <input type="time">
<label>
  Departure date
  <input type="date" min="2024-01-01" required>
</label>
Live example

MDN reference

When the dependency is still right

An answer that always says "the platform covers it" is worse than no answer. These are the cases where this one does not hold.

  • The displayed format has to be yours. The control renders in the user's own locale and there is no way to force dd/mm/yyyy, which is one of the most common reasons teams keep a date picker.
  • You need a date range, picking a start and end date in one control. The native input only holds one value.
  • You need the calendar's own appearance to match your design. Its popup is rendered by the browser or OS and cannot be restyled.
  • You need to disable specific dates, such as holidays or already-booked days, rather than a single continuous min/max range.
  • You need type="week" or type="month". Their browser support has not caught up to type="date" and type="time".

Packages this covers

Minified and gzipped, captured 2026-09-06.