Input types

by int32_t

HTML

<label>date
    <input type=date></label>
<label>date, min and max specified
    <input type=date min=2012-12-03 max=2013-01-28></label>
<label>date, step=3days
    <input type=date min=2012-12-01 step=3></label>
<label>date, datalist specified
    <input type=date list=dl1></label>
<hr>

<label>datetime-local
<input type=datetime-local></label>
<label>datetime-local, min and max specified
    <input type=datetime-local min=2012-12-03T12:00 max=2013-01-28T17:00></label>
<label>datetime-local, step=1.5days
    <input type=datetime-local min=2012-12-03T12:00 step=129600></label>
<label>datetime-local, step=1sec
    <input type=datetime-local min=2012-12-03T12:00 step=1></label>
<label>datetime-local, step=1msec
    <input type=datetime-local min=2012-12-03T12:00 step=0.001></label>
<label>datetime-local, datalist specified
    <input type=datetime-local list=dl1></label>
<hr>

<label>month
<input type=month></label>
<label>month, min and max specified
    <input type=month min=2012-12 max=2013-02></label>
<label>month, step=3months
    <input type=month min=2012-01 step=3></label>
<label>month, datalist specified
    <input type=month list=dl1></label>
<hr>

<label>time
    <input type=time></label>
<label>time, step=1sec
    <input type=time step=1></label>
<label>time, step=1msec
    <input type=time step=0.001></label>
<label>time, datalist specified
    <input type=time list=dl1></label>
<hr>

<label>week
<input type=week></label>
<label>week, min and max specified
    <input type=week min=2012-W30 max=2012-W51></label>
<label>week, step=2weeks
    <input type=week min=2012-W01 step=2></label>
<label>week, datalist specified
    <input type=week list=dl1></label>

<hr>
<datalist id=dl1>
    <option>2012-12-01</option>
    <option label="New year!">2013-01-01</option>
    <option>2013-02-11</option>
    <option>2012-12-31T23:00</option>
    <option>2013-01-01T12:00</option>
    <option>2012-01</option>
    <option>1999-07</option>
    <option>275760-09</option>
...

CSS

body {
    zoom: 1.5;
    padding: 10px;
}
label {
    display: block;
}