Tweet

Pocket

フォームにおいて、日付関連の入力を行うtype属性をご紹介します。

日付関連の入力を行うtype属性は以下のものがあります。

datetime･･･タイムゾーンUTCの日時を入力するための入力欄を作成
datetime-local･･･ローカルの日時を入力するための入力欄を作成
date･･･日付を入力するための入力欄を作成
week･･･週を入力するための入力欄を作成
month･･･月を入力するための入力欄を作成
time･･･時刻を入力するための入力欄を作成

日付はカレンダーから入力し、時刻は時、分を指定して入力できるようになっています。

【使用例（datetime）】

<input max="2010-12-31" min="2010-01-01" name="datetime" type="datetime" />

type属性がdatetime-local、date、week、monthの場合でもカレンダーによる入力補助が表示されます。
datetime、datetime-localの場合にのみ時刻入力の欄が表示されます。
時刻入力のみを使用したい場合は、timeを使用します。

【使用例（time）】

<input name="time" type="time" />

min、max、stepといった属性も指定できますので、入力してほしい条件によって使用するようにしましょう。

【対応ブラウザ】
Opera9.0以降