HTML <input> type="date"

The <input> tag with a type="date" attribute creates an input field that accepts a date value.

Inside this field is a calendar icon. Clicking this icon opens a date picker.



An <input> element of type date.
Clicking the calendar icon opens a date picker. Alternatively, enter a date directly into the field.

Date of Birth

<form action="/tutorial/action.html">
    <legend>Date of Birth</legend>

    <input type="date" name="dateofbirth"><br /><br />

    <input type="submit" value="Submit">

Using input type="date"

The <input type="date"> tag creates an input field for a date (month, day, year).

Clicking the calendar icon inside the field will open a date picker.

The control's UI varies from browser to browser. Not all browsers support date.

The date field also accepts manual entry which follows a date format.


<input type="date">

Browser support

Here is when type="date" support started for each browser:

20.0 Jun 2012
57.0 Nov 2017
12.0 Jul 2015
10.1 Jun 2009
Not Supported

You may also like

 Back to <input>

Author: Jack Poorte
Published: Jun 20 2021
Last Reviewed: Sep 30 2023

What's your favorite/least favorite part of Dofactory?