Post
Ask Question

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                                    
Next Recommended Reading Pure HTML5 and CSS3 Stylish Accordion - No jQuery and Js Required