HTML and CSS Reference
In-Depth Information
n
Note
As of this writing, Opera is the only browser that displays a pop-up date-time picker for the
date
and
time
input types. Chrome displays a pop-up date picker only when the input type is
date
; it renders a plain text box
for other date and time types. Also, there is a difference in the display format for
date
. Opera, for example, displays
dates in
yyyy-MM-dd
format, whereas Chrome displays them as per machine date format.
Listing 5-8 shows all the available date-time input types.
Listing 5-8.
Date and Time Input Types
<input id="dt1" type="date" />
<input id="dt2" type="time" />
<input id="dt3" type="datetime" />
<input id="dt4" type="datetime-local" />
<input id="dt5" type="week" />
<input id="dt6" type="month" />
The six date-time input types allow you to accept date, time, date and time, local date and time, week,
and month, respectively. The dates are displayed in
yyyy-MM-dd
format, whereas times are displayed in
hh:mm:ss
format. For weeks and months, the format is
yyyy-Www
and
yyyy-MM
, respectively. Figure 5-6
shows how Opera displays these date-time input types.
Figure 5-6.
Opera showing date-time input types
If you click the down arrow of the
date
input type displayed in Figure 5-6, a pop-up date picker is
displayed (see Figure 5-7).