Date and time <input> types
<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.
The resulting value includes the year, month, and day, but not the time. The time and datetime-local input types support time and date+time input.
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.