HTML5 > Forms Elements

Date, Week & Month picker in HTML5

How to give option to the user to select a date or week or month in HTML5?


Date picker

To provide optiont to select a date from the calendar control, we can set type attribute of the input element to "date".

<input type="date" name="myDate" id="myDate" />

Notice the type attribute, and see the output below. Clicking on the text box, shows a calendar control that allows user to select a date.

Output

Week picker

To provide option to select a week, we can set the type attribute of the input element to "week".

<input type="week" name="myWeek" required id="myWeek" />

Output

Week selector

Month picker

To provide option to select a month, we can set the type attribute of the input element to “month”.

     Month: <input type="month" id="myMonth" name="myMonth" />

Output

Support: At the time of writing this post, it is supported only in Google chrome, and Opera browser.

 Views: 1310 | Post Order: 94



Write for us