Home » Web » HTML, DHTML » Story Details
Printable Version

Date and Time control in HTML5

by Alok Pandey on Sep 21, 2011

Here we will learn about date and time controls in HTML5
Comments: 0    Views: 1750

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 type

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


date type 

  • 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

 time type

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


time type

 

  •  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 type

 

  • 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 type

 

  • 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

 

                                  

 

Post a Comment
*
DevExpress PowerBuilder Web Development Windows Development Languages Software Engineering Databases
iPhone Architecture Secutiry UML & Modeling Operating Systems Networking Testing
Graphics Design Project Management Hardware Open Source Games Development Business Intelligence Visual Studio LightSwitch 2011
MonoDevelop Visual Studio 2010 ASP.NET HTML, DHTML XML PHP JavaScript
Silverlight Web Services WCF Windows Forms WPF Windows Services Dynamic Link Libraries
ActiveX COM, DCOM, ATL C# VB.NET C++ F# Java
Pascal SQL Server Oracle DB2 MS-Access Windows Servers Windows
Linux Unix SAP LINQ .NET Framework ADO.NET Reporting
Crystal Reports SQL Server Reporting Services Igenda Reports Active Reports Adobe Fireworks Arrays & Collections Hosting
Future Trends Android Windows Phone Smart Devices Business M&A Investment & Funding
Web Browsers Internet Explorer Firefox Safari Common Entrepreneurs Students
Consulting Wiki Gadgets MobileMe iCloud iOS Social Media
Facebook Twitter LinkedIn Google+ Microsoft Kinect XBox
Wii Playstation DirectX i OS OS X CIO, CTO, CEO Windows 8
Web Design Expression Blend 4 Photoshop CS5 Creative Suite 5.5 Expression Web 4 Expression Studio 4 Creative Suite® 5.5 Design
Creative Suite 5.5 Web Creative Suite 5.5 Production Startups Funding M&A Laptops Smart Phones
Desktops Cameras & Camcorders Netbooks Tablets Virtualization Microsoft Surface WordPress
Software Products Cloud Computing Current Affairs Technology TV TV
Earnings XAML E-Commerce MonoTouch Mono for Android Deals Electronics
Mobile Phone Laptop Tablet Book Computer Press Releases Reviews
Products Books Companies Windows Azure SQL Azure Interviews Mac
Web Browsers Symbian Windows Forms WPF Windows Services HTML 5 Office 365
SharePoint 2010 Exchange Server Adobe Visual Studio 2012 iPad Flex / Flash Games
Windows 9
X
 Login
Please login to submit a new post, reply and edit exiting posts, see user profiles, and access more features. If you are not a registered member, Register here.
User Id / Email:
Password:  
Forgot Password | Forgot UserName