Date and Time controls in HTML5

There are several input types for date and time in HTML5. They are:

1. date Input Type: The date type is used for valid date entry by the user. It checks for valid date entry by the user. Its syntax is given below:

<input type="date">

Now we create a form with date input type by writing the following code:

<!DOCTYPE HTML>
<html>
<body>
<form method="post">
Date
<input type="date"/>
<input type="submit" />
</form>
</body>
</html>

Then we run this code. The output will look like as below:

If the user does date entry in other YYYY/MM/DD format, then after Clicking submit button it shows message like as following figure:

2. time Input Type: The time input type is used for valid time entry. It accepts the input in a 24-hour time format. Its syntax is given below:

<input type="time">

Now we create a form with time input type by writing the following code:

<!DOCTYPE HTML>
<html>
<body>
<form method="post">
Time
<input type="time"/>
<input type="submit" />
</form>
</body>
</html>

Then we run this code. The output will look like as below:

If the user does time entry other than HH: MM format, then after Clicking submit button it shows a message like as following figure:

3. datetime Input Type: The datetime input type is used to accept valid date time by user. Its syntax is given below:

<input type="datetime">

Now we create a form with datetime input type by writing the following code:

<!DOCTYPE HTML>
<html>
<body>
<form method="post">
Date Time
<input type="datetime"/>
<input type="submit" />
</form>
</body>
</html>

Then we run this code. The output will look like as below:

4. week Input Type: The week input type is used for input entry for the week. Its format is YYYY-WNo (No denotes week number). Its syntax is given below:

<input type="week">

Now we create a form with week input type by writing the following code:

<!DOCTYPE HTML>
<html>
<body>
<form method="post">
Week
<input type="week"/>
<input type="submit" />
</form>
</body>
</html>

Then we run this code. The output will look like as below:

5. month Input Type: The month type is used for input entry for the month. Its format is YYYY-Month. Its syntax is given below:

<input type="month">

We create a form with the month input type by writing the following code:

<!DOCTYPE HTML>
<html>
<body>
<form method="post">
Month
<input type="month"/>
<input type="submit" />
</form>
</body>
</html>

We run this code. The output will look like as below: