Date Time Form Input Type in HTML5

Gaurav Gupta
May 30, 2012
38.8k
0
1
Article

Introduction

In this article we are going to learn about the Date Time form input type in HTML5 using JavaScript. Here we will demonstrate the HTML5 input types date, time, week, month, date time and datetime-local. The date and time field is a very important attribute in websites for obtaining a date from the users and it can be easily found in many web forms. We will also use the attributes like step, min and max on the date time input types in HTML5. The drawback of the date time input type is that it is supported only in Opera browsers. The actual control of date time picker is only seen in Opera browser. If your browser doesn't support HTML5 date time then your are unable to see actual date time picker and it looks like a textbox.

The attribute that we can use with date time input is:

value: It is default value of input type when page is loaded first time.
min: It specify the Minimum value of Date or time.
max: It is specify the Maximum value of Date or time that user can be entered.
step: Different type of input has its own default "step" value.

In the later section we will discuss each type of datetime input types in HTML5.

Date: It shows the calendar at the browsers and the Date input type of HTML5 enables the the user to select only date from the calendar.
Time: The time input type of HTML5 enables the user to select only time from the time picker.
Datetime local: It is used to select date and time and it represents input date time value as local time.
Month: This attribute also shows a calendar to the user, but the user can select only a month from the calendar.
Week: Instead of picking a date, you can pick a week too.

We can also use the attribute like step, min and max with the date time input types in HTML5.

Supported browsers: As we know that the datetime input type is only supported on Opera browsers. Here we use an example of these input types of HTML5 and use some JavaScript code to display the selected values and also see the output of the code.

Source Code:

<head>

function showdata(a, b, c, d, e)

{

var v1 = document.getElementById(a).value;

var v2 = document.getElementById(a).value;

var v3 = document.getElementById(a).value;

var v4 = document.getElementById(a).value;

var v5 = document.getElementById(a).value;

var v6 = document.getElementById(a).value;

alert("your select values is" + "\n" + v1 + "\n" + v2 + "\n" + v3 +"\n" + v4 + "\n" + v5);

}

</script>

<style>

h1{background-color:#000;

color:#ccc;

text-align:left;

}

#mydate

{

width: 172px;

top: 88px;

left: 130px;

position: absolute;

height: 22px;

}

#Datetime1

{

width: 175px;

top: 127px;

left: 130px;

position: absolute;

height: 22px;

}

#time1

{

width: 172px;

top: 169px;

left: 130px;

position: absolute;

height: 22px;

}

#month1

{

width: 172px;

top: 210px;

left: 130px;

position: absolute;

height: 22px;

}

#week1

{

width: 172px;

top: 247px;

left: 130px;

position: absolute;

height: 22px;

}

</style>

</head>

<body>

<h1>Date Time Input Types in HTML5</h1><BR />

Select Date:&nbsp <input type="date" name="mydate" id="mydate" /><br /><br />

Select Datetime:&nbsp<input type="datetime-local" name="datetime1" id="Datetime1" /><br /><br />

Select Time:&nbsp<input type="time" name="time1" id="time1" /><br /><br />

Select Month:&nbsp<input type="month" name="month1" id="month1" /><br /><br />

Select Week:&nbsp<input type="week" name="week1" id="week1" /><br /><br />

<input type="button" onclick="showdata('mydate','datetime','time1','month1','week')"

value="submit" style="width: 148px; height: 36px; top: 296px; left: 55px; position: absolute" />

</body>

</html>

Output:

Unsupported browsers: Browsers that do not support the datetime input type of HTML5 render it as simply textboxes and the user sees only a simple textbox instead of any calendar. Here use Internet Explorer 9 browsers to show the output of the unsupported browsers.

Source Code: