Date and Time Input Types of HTML 5

Sourabh Somani
10y
8.2k
0
3

Article

Introduction

This article explains how to use the HTML 5 Date and Time Input Types. As we know HTML 5 has many features, one of the good features are, it comes with many new input types date, time, month and week attributes. You have seen in many ticket booking sites you have come across with a date picker or a date and time picker. Using the date and time picker you can easily and quickly pick the date, before HTML 5 we did this work by using a JavaScript, jQuery or AJAX library. But in HTML 5 we have some new input types for date, time, date-time, month, week and so on. These tags are so easy to use and also very pretty and straightforward.

Date Input Type

This tag allows users to select the date only. The following shows how to use this input type:

<input type="date" name="date1" id="date1"/>

Example

<!DOCTYPE html>
<html lang="en">
<body>
Date:<input type="date" name="date1" id="date1"/> <br/>
</body>
</html>

DateTime-Local Input Type: This tag allows users to select a date and time. The following shows how to use this input type:

<input type="datetime-local" name="dateTimeLocal1" id="dateTimeLocal1"/>

Example

<!DOCTYPE html>
<html lang="en">
<body>
DateTime-Local:<input type="datetime-local" name="dateTimeLocal1" id="dateTimeLocal1"/> <br/>
</body>
</html>

Time Input Type

This tag allows the user to select a time only. The following shows how to use this input type:

<input type="time" name="time1" id="time1"/>

Example

<!DOCTYPE html>
<html lang="en">
<body>
Time:<input type="time" name="time1" id="time1"/> <br/>
</body>
</html>

Month Input Type

This tag allows the user to select a month and year both. The following shows how to use this input type:

<input type="month" name="month1" id="month1"/> 
Example

<!DOCTYPE html>
<html lang="en">
<body>
Month:<input type="month" name="month1" id="month1"/> <br/>
</body>
</html>

Week Input Type

This tag allows the user to select a week with a year. Mainly in every year the week will start from January. It gives us an integer number for a week and year. The following shows how to use this input type:

<input type="week" name="week1" id="week1"/>  
Example

<!DOCTYPE html>
<html lang="en">
<body>
Week:<input type="week" name="week1" id="week1"/> <br/>
</body>
</html>

Now I will create a simple web page for this in which all the date and time input types will be. The Webpage Code is as given below:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script>
function processData(date, dateTimeLocal, time, month, week) {
var v1 = document.getElementById(date).value;
var v2 = document.getElementById(dateTimeLocal).value;
var v3 = document.getElementById(time).value;
var v4 = document.getElementById(month).value;
var v5 = document.getElementById(week).value;
alert(v1 + "\n" + v2 + "\n" + v3 + "\n" + v4 + "\n" + v5);
}
</script>
</head>
<body>
<h2>Well-Come to Date-Time Input Types of HTML-5</h2>
Date:<input type="date" name="date1" id="date1"/> <br/>
DateTime-Local:<input type="datetime-local" name="dateTimeLocal1" id="dateTimeLocal1"/> <br/>
Time:<input type="time" name="time1" id="time1"/> <br/>
Month:<input type="month" name="month1" id="month1"/> <br/>
Week:<input type="week" name="week1" id="week1"/> <br/>
<input type="button" value="Click Me..." onclick="processData('date1','dateTimeLocal1','time1','month1','week1');">
</body>
</html>