HTML5 Data and Services Cookbook

Inputting dates

Before HTML5 we were forced into creating custom controls that always had some missing features or were not compatible with some browsers. Now, there are separate input types for dates, and in this recipe we will see how to use them. They are unfortunately still not fully implemented across various user agents, but then everyone is slowly catching up.

How to do it...

We will simply create a basic HTML document and create a form in the body element:

1. First in the body section add form and inside it a date input element:

   <form>
     <label>
       Select date  <input name="theDate" type="date">
     </label>

2. Similarly we add an input element for month and week:

   <label> Select month <input name="theMonth" type="month"> </label> <label> Select week <input ...