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 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 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 Date or time that the 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 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 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:
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3.     <title></title>  
  4.  <script type="text/javascript">  
  5.      function showdata(a, b, c, d, e)  
  6.       {  
  7.          var v1 = document.getElementById(a).value;  
  8.          var v2 = document.getElementById(a).value;  
  9.          var v3 = document.getElementById(a).value;  
  10.          var v4 = document.getElementById(a).value;  
  11.          var v5 = document.getElementById(a).value;  
  12.          var v6 = document.getElementById(a).value;  
  13.          alert("your select values is" + "\n" + v1 + "\n" + v2 + "\n" + v3 +"\n" + v4 + "\n" + v5);  
  14.           }  
  15.   </script>  
  16.   <style>  
  17.     h1{background-color:#000;  
  18.        color:#ccc;  
  19.        text-align:left;  
  20.     }  
  21.       #mydate  
  22.       {  
  23.           width: 172px;  
  24.           top: 88px;  
  25.           left: 130px;  
  26.           position: absolute;  
  27.           height: 22px;  
  28.       }  
  29.       #Datetime1  
  30.       {  
  31.           width: 175px;  
  32.           top: 127px;  
  33.           left: 130px;  
  34.           position: absolute;  
  35.           height: 22px;  
  36.       }  
  37.       #time1  
  38.       {  
  39.           width: 172px;  
  40.           top: 169px;  
  41.           left: 130px;  
  42.           position: absolute;  
  43.           height: 22px;  
  44.       }  
  45.       #month1  
  46.       {  
  47.           width: 172px;  
  48.           top: 210px;  
  49.           left: 130px;  
  50.           position: absolute;  
  51.           height: 22px;  
  52.       }  
  53.       #week1  
  54.       {  
  55.           width: 172px;  
  56.           top: 247px;  
  57.           left: 130px;  
  58.           position: absolute;  
  59.           height: 22px;  
  60.       }  
  61.     </style>  
  62. </head>  
  63. <body>  
  64. <h1>Date Time Input Types in HTML5</h1><BR />  
  65. Select Date:  <input type="date" name="mydate" id="mydate" /><br /><br />  
  66. Select Datetime: <input type="datetime-local" name="datetime1" id="Datetime1" /><br /><br />  
  67. Select Time: <input type="time" name="time1" id="time1" /><br /><br />  
  68. Select Month: <input type="month" name="month1" id="month1" /><br /><br />  
  69. Select Week: <input type="week" name="week1" id="week1" /><br /><br />  
  70. <input type="button" onclick="showdata('mydate','datetime','time1','month1','week')"  
  71.   value="submit" style="width: 148px; height: 36px; top: 296px; left: 55px; position: absolute" />  
  72. </body>  
  73. </html> 
 Output:
1.jpg
 
2.jpg
 
3.jpg
 
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:
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2.    <head>  
  3.       <title></title>  
  4.       <script type="text/javascript">  
  5.          function showdata(a, b, c, d, e)  
  6.            
  7.           {  
  8.            
  9.              var v1 = document.getElementById(a).value;  
  10.            
  11.              var v2 = document.getElementById(a).value;  
  12.            
  13.              var v3 = document.getElementById(a).value;  
  14.            
  15.              var v4 = document.getElementById(a).value;  
  16.            
  17.              var v5 = document.getElementById(a).value;  
  18.            
  19.              var v6 = document.getElementById(a).value;  
  20.            
  21.              alert("your select values is" + "\n" + v1 + "\n" + v2 + "\n" + v3 +"\n" + v4 + "\n" + v5);  
  22.            
  23.               }  
  24.            
  25.       </script>  
  26.    </head>  
  27.    <body>  
  28.       <h1>Date Time Input Types in HTML5</h1>  
  29.       <BR />  
  30.       Select Date:  <input type="date" name="mydate" id="mydate" /><br /><br />  
  31.       Select Datetime: <input type="datetime-local" name="datetime1" id="Datetime1" /><br /><br />  
  32.       Select Time: <input type="time" name="time1" id="time1" /><br /><br />  
  33.       Select Month: <input type="month" name="month1" id="month1" /><br /><br />  
  34.       Select Week: <input type="week" name="week1" id="week1" /><br /><br />  
  35.       <input type="button" onclick="showdata('mydate','datetime','time1','month1','week')"  
  36.          value="submit" style="width: 148px; height: 36px; top: 296px; left: 55px; position: absolute" />  
  37.    </body>  
  38. </html> 
Output:
 
4