HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking sites, scheduling events sites or flight arrivals scan sites.
HTML5 Date and time control is useful in several ways. First, users can see day of the week while picking a date. Second, it prevents users from making a mistake in selecting proper date. For instance, some years have February 28th and not February 29th and some years have February 29th as valid dates.
It is common to use JavaScript for date and time control, also known as date picker control. There are Ajax based frameworks that render date picker and bind it to the form field. However, there is no need to use any of that with HTML5.
HTML5 has several controls that deal with date and time. They are different in appearances and behaviors. For example there are two different HTML5 controls for dates and time.
HTML5 Date control: <input
type="date"
/>
HTML5 Time control: <input
type="time"
/>
In addition, HTML5 date picker control can be rendered as calendar pop-up control as shown on the picture below.
Pic. 1: HTML5 Calendar Control
There are other HTML5 date and time controls that allow flexibility for your online form when it comes to choosing dates.
HTML5 month control:
<input
type="month"
/>
HTML5 week control: <input
type="week"
/>
Sample code and HTML5 boilerplate file for four different HTML date and time control presented below:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Date and Time Control</title>
</head>
<body>
<form id="myForm">
<input type="date"
/>
<p>
<input type="time"
/>
<p>
<input type="datetime"
/>
<p>
<input type="month"
/>
<p>
<input type="week"
/>
</form>
</body>
</html>
Download HTML5 Date and Time Code: 