Date Time Form Input Type in HTML5

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 the date-time picker is only seen in the Opera browser. If your browser doesn't support HTML5 date time then you are unable to see the actual date time picker and it looks like a textbox.

The attribute that we can use with date-time input is.

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

In the later section, we will discuss each type of DateTime input type in HTML5.

Date: It shows the calendar in the browsers and the Date input type of HTML5 enables the user to select the 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 attributes like step, min, and max with the date-time input types in HTML5.

Supported browsers

As we know 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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        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:  <input type="date" name="mydate" id="mydate" /><br /><br />
Select Datetime: <input type="datetime-local" name="datetime1" id="Datetime1" /><br /><br />
Select Time: <input type="time" name="time1" id="time1" /><br /><br />
Select Month: <input type="month" name="month1" id="month1" /><br /><br />
Select Week: <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

HTML

Input Types

Date time

Unsupported browsers

Browsers that do not support the date time input type of HTML5 render it as simple 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

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            function showdata(a, b, c, d, e)
            {
                var v1 = document.getElementById(a).value;
                var v2 = document.getElementById(b).value;
                var v3 = document.getElementById(c).value;
                var v4 = document.getElementById(d).value;
                var v5 = document.getElementById(e).value;
                alert("your select values is" + "\n" + v1 + "\n" + v2 + "\n" + v3 + "\n" + v4 + "\n" + v5);
            }
        </script>
    </head>
    <body>
        <h1>Date Time Input Types in HTML5</h1>
        <BR />
        Select Date: <input type="date" name="mydate" id="mydate" /><br /><br />
        Select Datetime: <input type="datetime-local" name="datetime1" id="Datetime1" /><br /><br />
        Select Time: <input type="time" name="time1" id="time1" /><br /><br />
        Select Month: <input type="month" name="month1" id="month1" /><br /><br />
        Select Week: <input type="week" name="week1" id="week1" /><br /><br />
        <input type="button" onclick="showdata('mydate','datetime1','time1','month1','week1')" value="submit" style="width: 148px; height: 36px; top: 296px; left: 55px; position: absolute" />
    </body>
</html>