HTML 【フォーム】５ ～ input要素（４）日時の入力部品

今回は、input要素で作る部品の中で、時間を入力する部品についてまとめます。

フォームについては、以下のページもご参照下さい。
HTML 【フォーム】１ ? フォームの概要とform要素の属性一覧
HTML 【フォーム】２ ? form要素の使い方
HTML 【フォーム】３ ? form要素で使う主な属性の使い方
HTML 【フォーム】４ ? fieldset要素とlegend要素
HTML 【フォーム】５ ? input要素（１）フォーム部品一覧
HTML 【フォーム】５ ? input要素（２）テキスト入力部品
HTML 【フォーム】５ ? input要素（３）ラジオボタンとチェックボックス

目次

１．日時を入力する部品
２．type以外の属性で機能を追加
３．datetimeとdatetime-local
４．dateで日付入力

１．日時を入力する部品

日時に関するinput要素のtype属性の値は、HTML5からの新しい属性値です。

対応ブラウザなら、入力補助のカレンダーや時間を選択するためのスピンボタンが表示されます。

上の表示に対するhtmlコードは、以下の通りです。

<input type=”datetime-local”>

▲目次へ戻る

２．type以外の属性で機能を追加

type属性以外の属性を使って、機能を追加することができます。

min属性	最小値を設定する
max属性	最大値を設定する
step属性	入力の段階（ステップ）を設定する
required属性	必須入力項目にする（未記入だと送信不可となる）
list属性	選択肢を表示する（datalist要素を併用する）
autofocus属性	HTML文書のロード後すぐにフォーカス（記入のために選択された状態に）する
form属性	form要素の外に出してレイアウトする
autocomplete属性	オートコンプリート機能（履歴から入力を予測する機能）の設定をする
readonly属性	読み取り専用の状態にする
disabled属性	使用不可の状態にする

▲目次へ戻る

３．datetimeとdatetime-local

<input type=”datetime”>と<input type=”datetime-local”>は、どちらも日付（年月日）と時刻を入力するための部品です。
そして、両者には、タイムゾーンを書くか書かないか、の違いがあります。

<input type=”datetime”>は、協定標準時（UTC）での日付と時刻の入力欄になります。
入力の際には、「2017-02-09T22:00:00+09:00」というように、最後に+00:00という形式でタイムゾーンを書きます。
上のように、日時の最後に+09:00と書けば日本時間になります（日本時間は協定標準時より9時間早いため）。

<input type=”datetime-local”>は、協定標準時は関係なくローカルな日付と時刻の入力欄になります。
入力の際には、「2017-02-09T22:00:00」というように、タイムゾーンなしで書きます。

書式には次のようなルールがあります。

・日時は「YYYY-MM-DD T HH：MM：SS」の形で書き、datetime の場合はタイムゾーンも追記します。
　（西暦年は4桁、月日と時分秒は2桁の数字で書き、時分秒の直前に大文字の「T」を入れます。）
・時間は24時間表記です。
・秒は省略可能です。
・秒は小数点以下の指定も可能です。

●<input type=”datetime-local”>で入力欄を作ると、ブラウザで次のように表示されます。

上の表示に対するhtmlコードは、以下の通りです。

<input type=”datetime-local” name=”datetime” min=”2017-02-09T22:00″ max=”2018-02-09T22:00″ step=”7200″ required>

name属性で、datetimeという部品名を付けています。

min属性で最小値（上の例では2017年2月9日22時）、max属性で最大値（上の例では2018年2月9日22時）を指定しています。

step属性は秒単位で指定するので、上の例では7200秒（2時間）に指定しています。2時間ずつのステップで選択できます。step属性を書かなかった場合は、デフォルト値は60秒ずつのステップになります。

required属性を指定していますので、日時を入力せずに送信ボタン等を押すとアラートが出ます。

●value属性で初期値を指定すると、ブラウザで次のように表示されます。

上の表示に対するhtmlコードは、以下の通りです。

<input type=”datetime-local” name=”datetime” min=”2017-02-09T22:00″ max=”2018-02-09T22:00″ step=”7200″ value=”2017-02-09T22:00″>

value属性で指定した値が、入力欄にデフォルトで表示されます。
required属性は、ユーザの入力忘れを防止する目的で使用しますが、value属性を使用している場合は、ユーザの未入力時でも、value属性の値でそのまま送信されてしまうため、required属性を指定しても意図した働きは期待できません。

●list属性を使用すると、ブラウザで次のように表示されます。

上の表示に対するhtmlコードは、以下の通りです。

<input type=”datetime-local” name=”datetime” list=”datelist” required>
<datalist id=”datelist”>
<option value=”2016-02-09T22:00″></option>
<option value=”2017-02-09T22:00″></option>
<option value=”2018-02-09T22:00″></option>
</datalist>

list属性は、datalist要素も併用して、上記の様に書きます。
選択リストで「その他」をクリックすると、カレンダーが表示されて、リストにない日付の入力ができます。

▲目次へ戻る

４．dateで日付入力

<input type=”date”>は、日付を入力するための部品です。
type=”datetime” から文字通りtime（時間）が無くなったものです。
日付（年月日）を選択して入力してもらいます。
書式は「YYYY-MM-DD」です。

上の表示に対するhtmlコードは、以下の通りです。

<input type=”date” name=”date” min=”2018-02-09″ max=”2019-02-09″ step=”7″ required>

datetime-localの時と同じく、name属性、min属性、max属性、step属性、required属性を指定しています。
step属性は、１日単位の指定となります。上の例では７日に指定しています。
step属性を指定しない場合、初期値である１日ずつのステップとなります。

▲目次へ戻る