Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

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.

Example

#

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">
  <fieldset>
    <legend>Date of Birth</legend>

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

    <input type="submit" value="Submit">
  </fieldset>
</form>

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.


Syntax

<input type="date">

Browser support

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

Chrome
20.0 Jun 2012
Firefox
57.0 Nov 2017
IE/Edge
12.0 Jul 2015
Opera
10.1 Jun 2009
Safari
Not Supported

You may also like

 Back to <input>

Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides