Date and time <input> types
Date and time input types provide native controls for picking dates, times, months, and related values. They can reduce formatting errors and improve mobile entry.
Overview
Date and time input types provide native controls for picking dates, times, months, and related values. They can reduce formatting errors and improve mobile entry.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 5 | 12 | 57 | 5 | 18 | 4 | |
| HTML attribute | ||||||
| input elements of type="date" create input fields that let the user enter a date. The appearance of the date picker input UI varies based on the browser and operating system. The value is normalized to the format yyyy-mm-dd. | 20 | 12 | 57 | 14.1 | 25 | 5 |
| input elements of type datetime-local create input controls that let the user easily enter both a date and a time, including the year, month, and day as well as the time in hours and minutes. | 20 | 12 | 93 | 14.1 | 25 | 5 |
| input elements of type month create input fields that let the user enter a month and year allowing a month and year to be easily entered. The value is a string whose value is in the format YYYY-MM, where YYYY is the four-digit year and MM is the month number. | 20 | 12 | | | 25 | ≤11.3 |
| input elements of type time create input fields designed to let the user easily enter a time (hours and minutes, and optionally seconds). | 20 | 12 | 57 | 14.1 | 25 | 5 |
| input elements of type week create input fields allowing easy entry of a year plus the ISO 8601 week number during that year (i.e., week 1 to 52 or 53). | 20 | 12 | | | 25 | 18.2 |
- This feature was removed in a later browser version (24)
- Only displays a date picker without a time picker, see bug 1726107 and bug 1726108.
- Safari only displays a date picker and does not display a time picker.
- The input type is recognized, but there is no month-specific control. See bug 200416.
Syntax
<label>Date: <input type="date" name="date"></label>
<label>Date: <input type="time" name="time"></label>
<label>Date and time: <input type="datetime-local" name="datetime"></label>
<label>Month: <input type="month" name="month"></label>Live demo
Use cases
Scheduling inputs
Collect appointments, deadlines, and booking dates with browser-native entry patterns.
Time-specific settings
Capture alarm times, availability windows, or reminder settings with less free-form parsing.
Cautions
- Native date and time controls vary across browsers and platforms, so test real devices rather than assuming uniform UI.
- If timezone, locale formatting, or validation rules are complex, native inputs may need extra guidance around them.
Accessibility
- Date and time inputs still need clear labels and format expectations, especially when browser controls differ by platform.
Related links
Powered by web-features