Date and time pickers
<input type="date"> and <input type="time">
Chrome20
Edge12
Firefox93
Safari14.1
Features it needs
- Date and time <input> typesWidely available
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
<label>
Departure date
<input type="date" min="2024-01-01" required>
</label>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".
Signs it was hand-rolled
No package is involved in any of these, so nothing would match in a package.json. If the code looks like one of them, this rule applies anyway, and the conditions above still decide.
- building a month grid from Date arithmetic, with the leading blanks worked out from getDay
- a text input with a placeholder like dd/mm/yyyy and a hand-written parser checking what was typed