Date and Time controls in HTML5

Here we will learn about date and time controls in HTML5.

Date and Time controls in HTML5

 
There are several input types for date and time in HTML5. They are:
 
1. date Input Type: The date type is used for valid date entry by the user. It checks for valid date entry by the user. Its syntax is given below:
 
<input type="date">
 
Now we create a form with date input type by writing the following code:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <form method="post">  
  5. Date   
  6.             <input type="date"/>  
  7.             <input type="submit" />  
  8.         </form>  
  9.     </body>  
  10. </html>  
Then we run this code. The output will look like as below:
 
date type
 
If the user does date entry in other YYYY/MM/DD format, then after Clicking submit button it shows message like as following figure:
 
date type
 
2. time Input Type: The time input type is used for valid time entry. It accepts the input in a 24-hour time format. Its syntax is given below:                              
<input type="time">
 
Now we create a form with time input type by writing the following code:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <form method="post">  
  5. Time   
  6.             <input type="time"/>  
  7.             <input type="submit" />  
  8.         </form>  
  9.     </body>  
  10. </html>  
Then we run this code. The output will look like as below:
 
time type
 
If the user does time entry other than HH: MM format, then after Clicking submit button it shows a message like as following figure:
 
time type
 
3. datetime Input Type: The datetime input type is used to accept valid date time by user. Its syntax is given below:
 
<input type="datetime">
 
Now we create a form with datetime input type by writing the following code:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <form method="post">  
  5. Date Time   
  6.             <input type="datetime"/>  
  7.             <input type="submit" />  
  8.         </form>  
  9.     </body>  
  10. </html>  
Then we run this code. The output will look like as below:
 
datetime type 
 
4. week Input Type: The week input type is used for input entry for the week. Its format is YYYY-WNo (No denotes week number). Its syntax is given below:
 
<input type="week">
 
Now we create a form with week input type by writing the following code:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <form method="post">  
  5. Week   
  6.             <input type="week"/>  
  7.             <input type="submit" />  
  8.         </form>  
  9.     </body>  
  10. </html>  
Then we run this code. The output will look like as below:
 
week type 
 
5. month Input Type: The month type is used for input entry for the month. Its format is YYYY-Month. Its syntax is given below:
 
<input type="month">
 
We create a form with the month input type by writing the following code:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <form method="post">  
  5. Month   
  6.             <input type="month"/>  
  7.             <input type="submit" />  
  8.         </form>  
  9.     </body>  
  10. </html>  
We run this code. The output will look like as below:
 
month type