Date and Time control in HTML5

Posted in HTML 5 | Learn HTML 5 November 19, 2019
Tags: HTML, HTML attribute, Date and Time control in HTML5
Here we will learn about date and time controls in HTML5
  • 3101

Introduction: There are several input type for date and time in HTML5. They are,

  • date Input Type: The date type is used for valid date entry by user. It checks for valid date entry by user. Its syntax is given below

                                    <input type="date">

Now we create a form with date input type by writing following code

<!DOCTYPE HTML>
<html>
<body>
<form method="post">
Date <input type="date"/>
<input type="submit" />
</form>
</body>
</html>

Then we run this code. The output will look like as below

date.gif
 

If user does date entry other YYYY/MM/DD format, then after Clicking submit button it shows message like as following figure


 

date1.gif 
 

  • time Input Type: The time input type is used for valid time entry. It accept input in 24-hour time format. Its syntax is given below                        

                                     <input type="time">

Now we create a form with time input type by writing following code

<!DOCTYPE HTML>
<html>
<body>
<form method="post">
Time <input type="time"/>
<input type="submit" />
</form>
</body>
</html>


Then we run this code. The output will look like as below

  time1.gif

If user does time entry other than HH:MM format,then after Clicking submit button it shows message like as following figure


 

time2.gif
 

 

  •  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 following code

<!DOCTYPE HTML>
<html>
<body>
<form method="post">
Date Time <input type="datetime"/>
<input type="submit" />
</form>
</body>
</html>

Then we run this code. The output will look like as below

datetime.gif
 

 

  • week Input Type: The week input type is used for input entry for 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 following code

<!DOCTYPE HTML>
<html>
<body>
<form method="post">
Week <input type="week"/>
<input type="submit" />
</form>
</body>
</html>

Then we run this code. The output will look like as below


 

week.gif
 

 

  • month Input Type: The month type is used for input entry for month. Its format is YYYY-Month. Its syntax is given below

                                <input type="month">

We create a form with month input type by writing following code

<!DOCTYPE HTML>
<html>
<body>
<form method="post">
Month <input type="month"/>
<input type="submit" />
</form>
</body>
</html>

We run this code. The output will look like as below

month type

 

                                  

    © 2020 DotNetHeaven. All rights reserved.