Date and Time Input Types of HTML 5

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 is, 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 a 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
  1. <!DOCTYPE html>    
  2.     
  3. <html lang="en">    
  4.     <body>    
  5.         Date:<input type="date" name="date1" id="date1"/> <br/>    
  6.     </body>    
  7. </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
  1. <!DOCTYPE html>    
  2.     
  3. <html lang="en">    
  4.     <body>    
  5.         DateTime-Local:<input type="datetime-local" name="dateTimeLocal1" id="dateTimeLocal1"/> <br/>    
  6.     </body>    
  7. </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
  1. <!DOCTYPE html>    
  2.     
  3. <html lang="en">    
  4.     <body>    
  5.         Time:<input type="time" name="time1" id="time1"/> <br/>    
  6.     </body>    
  7. </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  
      1. <!DOCTYPE html>    
      2.     
      3. <html lang="en">    
      4.     <body>    
      5.         Month:<input type="month" name="month1" id="month1"/> <br/>    
      6.     </body>    
      7. </html> 

      Week Input Type

       
      This tag allows the user to select a week with a year. Mainly every year, the week will start in  January. It gives us an integer number for a week and a year.  The following shows how to use this input type:
       
      <input type="week" name="week1" id="week1"/>
       
      Example
      1. <!DOCTYPE html>    
      2.     
      3. <html lang="en">    
      4.     <body>    
      5.         Week:<input type="week" name="week1" id="week1"/> <br/>    
      6.     </body>    
      7. </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:
      1. <!DOCTYPE html>    
      2.     
      3. <html lang="en">    
      4.     <head>    
      5.         <meta charset="utf-8" />    
      6.         <title></title>    
      7.         <script>    
      8.             function processData(date, dateTimeLocal, time, month, week) {    
      9.                 var v1 = document.getElementById(date).value;    
      10.                 var v2 = document.getElementById(dateTimeLocal).value;    
      11.                 var v3 = document.getElementById(time).value;    
      12.                 var v4 = document.getElementById(month).value;    
      13.                 var v5 = document.getElementById(week).value;    
      14.                 alert(v1 + "\n" + v2 + "\n" + v3 + "\n" + v4 + "\n" + v5);    
      15.             }    
      16.         </script>    
      17.     </head>    
      18.     <body>    
      19.         <h2>Well-Come to Date-Time Input Types of HTML-5</h2>    
      20.         Date:<input type="date" name="date1" id="date1"/> <br/>    
      21.         DateTime-Local:<input type="datetime-local" name="dateTimeLocal1" id="dateTimeLocal1"/> <br/>    
      22.         Time:<input type="time" name="time1" id="time1"/> <br/>    
      23.         Month:<input type="month" name="month1" id="month1"/> <br/>    
      24.         Week:<input type="week" name="week1" id="week1"/> <br/>    
      25.         <input type="button" value="Click Me..." onclick="processData('date1','dateTimeLocal1','time1','month1','week1');">    
      26.     </body>    
      27. </html>   
        The output of the code above
        1. When the webpage runs initially
           
           
        2. On the selection of date
           
           
        3. On the selection of date and time local
           
           
        4. On the selection of time
           
           
        5. On the selection of the month
           
           
        6. On the selection of week
           
           
        7. When all the fields will be selected then
           
           
        8. When you click on the Click Me... button
           

        Conclusion

         
        In this article, we studied Date and Time Input Types of HTML 5