Saturday, 23 June 2012

How to add Date and Time Selector box in HTML5 Forms

You can have a calendar appear when a user clicks inside of a text box. Unfortunately, only the Opera browser does this. Here's what it looks like:

An HTML 5 popup calendar

Being able to select a date like this is a terrific innovation that hopefully other browsers will implement in the future. The HTML for the above calendar is this:

<INPUT TYPE="date" value="">

The TYPE is "Date", but you can have other TYPES:

TYPE="Date"
TYPE="Month"
TYPE="Week"
TYPE="Time"
TYPE="Datetime"
TYPE="Datetime-local"

All the other browsers will just show you a blank text box in place of the TYPEs above.

No comments:

Post a Comment