HTML5: Up and Running

Date Pickers

HTML 4 did not include a date picker control. Various JavaScript frameworks have picked up the slack—for example, Dojo, jQuery UI, YUI, and Closure Library—but of course each of these solutions requires “buying into” the framework on which the date picker is built.

HTML5 finally defines a way to include a native date picker control without having to script it yourself. In fact, it defines six: date, month, week, time, date + time, and date + time – timezone.

So far, as Table 9-4 illustrates, support is...sparse.

Table 9-4. Date picker support

Input type	Opera	Every other browser
type="date"	9.0+	•
type="month"	9.0+	•
type="week"	9.0+	•
type="time"	9.0+	•
type="datetime"	9.0+	•
type="datetime-local"	9.0+	•

Figure 9-9 shows how Opera renders an <input type="date">.

Figure 9-9. A date picker

If you need a time to go with that date, Opera also supports <input type="datetime">, as shown in Figure 9-10.

Figure 9-10. A date/time picker

If you only need a month and year (perhaps a credit card expiration date), Opera can render an <input type="month">, as shown in Figure 9-11.

Figure 9-11. A month picker

Less common, but also available, is the ability to pick a specific week of a year with <input type="week">