datetime
<input type="datetime" name="datetime" />
「datetime」を指定すると、フォームパーツはグローバル日時（UTC：協定世界時で記述した日時）の入力欄になります。対応しているブラウザーでは年月日と時分を入力するコントロールが表示されます。たとえばOperaでは、年月日を入力するカレンダーと、日時を入力するステップアップ・ダウンボタン付き入力ボックスが表示されます。
Operaのスクリーンショット。カレンダーが表示される
また、min属性とmax属性を使うと、ユーザーが選択可能な期間を指定できます。たとえば、ショッピングサイトのお届け日指定機能で、「3日後以降1か月以内」といった制限を付けたい場合に利用できます。
<input type="datetime" name="datetime" min="2012-04-25T00:00Z" max="2012-05-24T00:00Z" />
Operaのスクリーンショット。選択できない日付がグレーアウトしている
step属性に数値を指定すると、時分の入力の刻みを指定できます。単位は秒で、「60」で1分刻みになるので、5分刻みにしたいときは「300」と指定します。
<input type="datetime" name="datetime" min="2012-04-25T00:00Z" max="2012-05-24T00:00Z" step="300" />
ポイント
datetimeはタイムゾーンがUTCで固定されているため、サーバーには日本時間から9時間前の時刻が送信されます。日本時間のみを扱うときには、後述のdatetime-localが適しています。
ポイント
datetimeは、「正確でない日時」（関連記事）を入力するには適していません。
date
<input type="date" name="date" />
「date」を指定すると、フォームパーツは年月日の入力欄になります。対応しているブラウザーでは年月日を入力するコントロールが表示されます。Operaでは、datetimeと同じ系統のカレンダー型コントロールが利用できます。
Operaのスクリーンショット。カレンダーが表示される
<input type="date" name="date" min="2012-04-25" max="2012-05-24" step="7" />
min属性とmax属性で期間を指定できる点や、step属性で刻みを指定できる点もdatetimeと同様です。step属性の値の単位は日で、「1」を指定すると1日刻みになります。
month
<input type="month" name="month" />
「month」を指定すると、フォームパーツは年月の入力欄になり、対応しているブラウザーでは年月を入力するコントロールが表示されます。Operaではdatetimeと同様のカレンダー型のコントロールが利用できます。
Operaのスクリーンショット。カレンダーが表示される
min属性やmax属性、step属性を指定できます。min属性と、値が12のstep属性を同時に指定すると、min属性で指定した月のみを選択できるようになります。たとえば、min="2012-04" step="12"とすると、2012年4月、2013年4月、2014年4月……といった具合に、毎年4月のみが選択できるようになります。
<input type="month" min="2012-04" step="12" />
week
<input type="week" name="week" />
「week」を指定すると、フォームパーツは週の入力欄になります。対応しているブラウザーでは週を入力するコントロールが表示されます。Operaでは、datetimeなどと同様のカレンダー型のコントロールが利用できます。
Operaのスクリーンショット。Operaでのweekのカレンダーは、左側に何週目かの表示がある
weekの値は西暦と週の組み合わせで構成されます。たとえば、「2012-W04」は2012年の4週目、「2099-W34」は2099年の34週目という意味です。min属性やmax属性、step属性も指定できます。
<input type="week" min="2012-W04" max="2099-W34" step="1" />
time
<input type="time" name="time" />
「time」を指定すると、フォームパーツは時分秒の入力欄になります。対応しているブラウザーでは時分秒を入力するコントロールが表示されます。Operaでは、datetimeと同様のステップアップ・ダウンボタン付き入力ボックスが利用できます。
Operaのスクリーンショット
以下のようにmin属性とmax属性も指定できます。
<input type="time" name="time" min="00:00" max="15:00" />
デフォルトでは時間と分のみの入力できますが、step属性の値を「1」などにすることで、秒も入力できるようになります。step属性の単位が秒であり、デフォルト値が「60」なので、59以下の値にすれば秒刻みで入力できることになります。
<input type="time" name="time" min="00:00" max="15:00" step="1" />
Operaのスクリーンショット。桁が増えている
さらに、step属性を「0.1」などにすると、Operaではミリ秒も入力できるボックスになります。
<input type="time" name="time" min="00:00" max="15:00" step="0.01" />
Operaのスクリーンショット。ミリ秒まで入力できる
datetime-local
<input type="datetime-local" name="datetime-local" />
「datetime-local」は、タイムゾーンを持たないdatetimeです。
Operaのスクリーンショット。見た目はdatetimeと変わらない
min属性／max属性／step属性の扱いも、datetimeと同様です。
<input type="datetime-local" name="datetime-local" min="2012-04-25T00:00" max="2012-05-24T00:00" step="300" />
