HTML5 Date and Time Example

March 30, 2014
Html5
HTML5 is rich in providing date and time input types. There are different input types to handle date and time requirement in the UI provided by HTML5. All these types run on only those browsers which support HTML5. Now we will understand date and time input types one by one. I checked all below examples on Opera version 12.12.

"date" Input Type in HTML5

Find the sample example below. 
<!DOCTYPE html>
<html>
<body>
<form action="">
  Select Date <input type="date" name="dt">
  <input type="submit">
</form>
</body>
</html>

Test now

"datetime" Input Type in HTML5

The input type datetime provides the time zone and with that we can select date globally. It provides date and time both values. Find the example below. 
<!DOCTYPE html>
<html>
<body>
<h3>datetime Demo in HTML5</h3>
<form action="">
  Select Date <input type="datetime" name="dt">
  <input type="submit">
</form>
</body>
</html>

Test now

"datetime-local" Input Type in HTML5

The input type datetime-local will aslo provides date and time but it will not allow selecting timezone. It facilitates the local user to select the datetime. 
<!DOCTYPE html>
<html>
<body>
<h3>datetime-local Demo in HTML5</h3>
<form action="">
  Select Date <input type="datetime-local" name="dt">
  <input type="submit">
</form>
</body>
</html>

Test now

"month" Input Type in HTML5

HTML5 provides the month input type that allow to select month of a year. We will get month and year as input type. 
<!DOCTYPE html>
<html>
<body>
<h3>month Demo in HTML5</h3>
<form action="">
  Select Date <input type="month" name="dt">
  <input type="submit">
</form>
</body>
</html>

Test now

"time" Input Type in HTML5

The input type time will provide only time with AM and PM. In the case where we want to take input only time in user form, time input type will save your time to achieve it. 
<!DOCTYPE html>
<html>
<body>
<h3>time Demo in HTML5</h3>
<form action="">
  Select Time <input type="time" name="tm">
  <input type="submit">
</form>
</body>
</html>

Test now

"week" Input Type in HTML

This is also one of the interesting input type. While selecting date, it provides a specific column for week. User easily can identify that that which date is week days. 
<!DOCTYPE html>
<html>
<body>
<h3>week Demo in HTML5</h3>
<form action="">
  Select date  <input type="week" name="dt">
  <input type="submit">
</form>
</body>
</html>

Test now
RELATED POST

LEARN MORE
JAVA SPRING BOOT ANGULAR Angular Material NGRX JAVASCRIPT ANDROID THYMELEAF FREEMARKER Hibernate Struts 2 Testing MAVEN APACHE API JACKSON API JUNIT 5








©2024 concretepage.com | Privacy Policy | Contact Us