HTML5 Date Input Type

The date type is used in <input> tag to select the particular date by the user. It shows a pop-up calendar with specifying date (year/month/date). The dates are used for specifying a person”s birthday or about a event or to note of the material purchased by an organizer etc. It can be either in format of dd/mm/yyyy or yyyy/mm/dd.

Syntax of date Input Type

<input type= "date">

Browser Support

Not all browsers support this type. Only Chrome, Opera, Safari support this input type. Those which do not support, in such browsers thie field appears as normal text field.

HTML5 date Input Type Example

<!DOCTYPE html>
<head>
<title>Date Input Type</title>
</head>
<body>
	<form>
		Name <input type="value"><br>
                Surname<input type="value"><br>
		Birthday<input type="date" max= "2020-12-31"><br><br>
                <input type="submit">
	</form>

</body>
</html>
  • In this program we have taken a form which contains 3 fields i.e. name, surname and birthday.
  • Here in this program we are setting date in the birthday field using date type. The maximum value is been set till 2020-12-31.

Example Application Test

  • Save the file as date_example.html in your system..
  • Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.

Output

When the execution process is completed successfully we will get the following output :
HTML5 Date Input Type

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*