[49-4] input要素で時間を入力してもらおう (datetime-local, date, month, week, time)

<input>要素の「type属性」で「時間」に関するフォーム部品を作りましょう。

対応ブラウザでは、「カレンダー」などのピッカーや「スピナー（ ）」が現れて、日付や時間を選ぶことができます。

下の表はインデックスになっています。各値をクリックすると、該当の項目にジャンプします。

	type属性の値	部品の役割
<input>要素で作る 「時間」関連の部品	type="datetime"	協定標準時による時間で日付と時刻の入力 この値は廃止になりました。
	type="datetime-local"　 new	ローカルな時間で日付と時刻の入力
	type="date"　 new	日付の入力
	type="month"　 new	月の入力
	type="week"　 new	週の入力
	type="time"　 new	時刻の入力

● 2017年12月：値「datetime」が廃止になっているため、このページは全体的に書き直しました。

type="datetime-local" で「日付と時刻」を

<input type="datetime-local">は、日付と時刻の入力部品になります。

書式にはこんな決まりがあります。

• 日時は「西暦-月-日 T 時：分：秒」で書く。
• 西暦年は4桁、月日と時分秒は2桁の数字。時分秒の直前に大文字の「T」を入れる。
• 時間は24時間表記。（例：午後6時ジャストは「T18:00:00」）
• 秒は省略可。（最後の「:00」をとります。午後6時ジャストは「T18:00」でOK）
• 秒は小数点以下の指定も可能。小数点（.）のあとに数字を続けます。

datetime-local の「required属性」を使ったサンプル

サンプルです。

お客様情報

ご希望の日時：

サンプルの HTMLソースはこちら。

<form class="sample">
  <fieldset>
    <legend>お客様情報</legend>
    <label>ご希望の日時：<input type="datetime-local" name="datetime" required></label>
    <input type="submit" value="送信">
  </fieldset>
</form>

name属性で部品名をつけます。formのデータを扱うプログラムで、送信値と紐付けるためです。
また、required属性を指定しています。
日時を入力しないで送信ボタンを押すとすると、アラートが出ます。

対応ブラウザは Chrome, Opera, Edge
対応ブラウザでは「カレンダー」が表示され、日付を選ぶことができます。
（Edgeは独自のピッカーが出て日付を選べます。）
「スピナー（ ）」で日付・時間を1つずつ選ぶこともできます。
下は Chrome での表示です。

IE, Safari は未対応。
iOS Safari は対応していますが、min, max, step属性に未対応。
Firefox は、ver.57 から対応となっていますが、実際は未対応のようです。
（2017年12月記 / 参考：Can I Use - datetime-local）

datetime-local の「max, min, step, value属性」を使ったサンプル

min属性で最小値、max属性で最大値を指定できます。対応ブラウザでは、min属性〜 max属性の範囲しか選択できなくなります。
value属性で初期値を書いて置くこともできます。
この場合、ユーザが何も選択しなくても value属性の値で送信されるので、required属性を書いても意味無し。

step属性は秒単位で指定します。
下のサンプルでは、step属性を 2時間ずつ（7200秒）に指定しています。

お客様情報

ご希望の日時：

サンプルの HTMLソースはこちら。

<label>ご希望の日時：
  <input type="datetime-local" name="datetime" min="2018-01-01T09:00" max="2018-01-31T21:00" step="7200" value="2018-01-01T09:00"></label>

datetime-local の「list属性」を使ったサンプル

list属性は、<datalist>要素も併用します。
あらかじめ、選択肢のリストを作って置けて、ユーザーはその中から選択できます。

お客様情報

ご希望の日時：

サンプルの HTMLソースはこちら。

<form class="sample">
  <fieldset>
    <legend>お客様情報</legend>
    <label>ご希望の日時：
    <input type="datetime-local" name="datetime" list="datelist"></label>
    <datalist id="datelist">
      <option value="2018-01-01T13:00"></option>
      <option value="2018-01-02T13:00"></option>
      <option value="2018-01-03T13:00"></option>
    </datalist>
    <input type="submit" value="送信">
  </fieldset>
</form>

対応ブラウザでは、下図のようなリストが表示されます。最終行の「その他...」でカレンダーが表示されます。

type="date" で「日付」を入力してもらおう

"date"は文字通り、日付け（年月日）をチョイスしてもらう部品です。
書式は「西暦-月-日」で、2018年5月1日なら「2018-05-01」です。

type="date" は、Firefox も一応カレンダーが表示されますが、中途半端な対応。
min, max, value属性の値を無視するので入力しにくいです。（2017年12月記）

date の「max, min, step, required属性」を使ったサンプル

type="date" では step属性は1日単位の指定になります。
step属性を書かなければ初期値の1日ずつのステップになります。

お客様情報

ご希望の日：

<form class="sample">
  <fieldset>
    <legend>お客様情報</legend>
    <label>ご希望の日：
    <input type="date" name="date" min="2020-01-05" max="2020-01-31" 
    step="7" value="2020-01-05" required></label>
    <input type="submit" value="送信">
  </fieldset>
</form>

date の「list属性」を使ったサンプル

list属性は、<datalist>要素も併用します。
あらかじめ、選択肢のリストを作って置けて、ユーザーはその中から選択できます。

お客様情報

ご希望の日：

<form class="sample">
  <fieldset>
    <legend>お客様情報</legend>
    <label>ご希望の日：
    <input type="date" name="date" list="3date" required ></label>
    <datalist id="3date">
    <option value="2020-01-01"></option>
    <option value="2020-01-02"></option>
    <option value="2020-01-03"></option>
    </datalist>
    <input type="submit" value="送信">
  </fieldset>
</form>

type="month" で「月」を入力してもらおう

"month"は、年・月をチョイスしてもらう部品です。
書式は「西暦-月」で、2018年5月なら「2018-05」になります。

month の「max, min, step, required属性」を使ったサンプル

type="month" では step属性は1ヶ月単位の指定になります。step属性を書かなければ初期値の1月ずつのステップになります。

お客様情報

ご希望の月：

<form class="sample">
  <fieldset>
    <legend>お客様情報</legend>
    <label>ご希望の月：
    <input type="month" name="month" min="2018-04" max="2018-12" step="2" required></label>
    <input type="submit" value="送信">
  </fieldset>
</form>

month の「list属性」を使ったサンプル

お客様情報

ご希望の月：

<form class="sample">
  <fieldset>
    <legend>お客様情報</legend>
    <label>ご希望の月：
    <input type="month" name="month" list="3month" required></label>
    <datalist id="3month">
    <option value="2018-05"></option>
    <option value="2018-06"></option>
    <option value="2018-07"></option>
    </datalist>
    <input type="submit" value="送信">
  </fieldset>
</form>

type="week" で「週」を入力してもらおう

"week"は、週 をチョイスしてもらう部品です。
書式は「西暦-W週」で、「元旦のある週の月曜から日曜まで」が第一週で「W01」になります。2018年の第28週なら「2018-W28」になります。

week の「max, min, step, required属性」を使ったサンプル

weekの step属性は、1週間単位。step属性を書かなければ初期値の1週ずつのステップになります。
サンプルでは2週間のステップにしました。

お客様情報

ご希望の週：

<form class="sample">
  <fieldset>
    <legend>お客様情報</legend>
    <label>ご希望の週：
    <input type="week" name="week" min="2018-W01" max="2018-W26" step="2" required></label>
    <input type="submit" value="送信">
  </fieldset>
</form>

week の「list属性」を使ったサンプル

お客様情報

ご希望の週：

<form class="sample">
  <fieldset>
    <legend>お客様情報</legend>
    <label>ご希望の週：
    <input type="week" name="week" list="3weeks" required></label>
    <datalist id="3weeks">
    <option value="2018-W14"></option>
    <option value="2018-W15"></option>
    <option value="2018-W16"></option>
    </datalist>
    <input type="submit" value="送信">
  </fieldset>
</form>

type="time" で「時間」を入力してもらおう

"time"は、時間 をチョイスしてもらう部品です。
書式は「00:00:00」で、24時間表記で時分秒を表します。午後2時30分45秒なら「14:30:45」です。

• 秒は省略可。（午後2時ジャストは「14:00」でOK）
• 秒は小数点以下の指定も可能。小数点（.）のあとに数字を続けます。

time の「max, min, step, required属性」を使ったサンプル

weekの step属性は、秒単位で指定します。
サンプルでは30分（1800秒）のステップにしました。

お客様情報

ご希望時間：

<form class="sample">
  <fieldset>
    <legend>お客様情報</legend>
    <label>ご希望時間：
    <input type="time" name="time" min="09:00" max="16:59" step="1800" required></label>
    <input type="submit" value="送信">
  </fieldset>
</form>

time の「list属性」を使ったサンプル

お客様情報

ご希望時間：

<form class="sample">
  <fieldset>
    <legend>お客様情報</legend>
    <label>ご希望時間：
    <input type="time" name="time" list="3time" required></label>
    <datalist id="3time">
    <option value="09:00"></option>
    <option value="12:00"></option>
    <option value="15:00"></option>
    </datalist>
    <input type="submit" value="送信">
  </fieldset>
</form>

ほかの属性で機能を追加できます

今回はサンプルで、min, max, step, required, list属性などを使ってみましたが、その他の属性も使って、さらに機能を追加できます。

• autofocus属性：HTMLのロード後すぐフォーカス（記入のための選択）する
• form属性： <form>要素の外に出してレイアウトする
• autocomplete属性：オートコンプリート機能の指定をする
• readonly属性：読み取り専用にする
• disabled属性：使用不可にする

<input>要素の 索引ページ

<input>要素は「type属性の値」でいろいろなフォームの部品になります。
今回の「日付・時間」の選択の部品以外は、下記の一覧をご覧ください。

• <input>要素の type属性の値一覧

<input>要素は、type属性以外にもたくさんの属性があり、それによってフォーム部品に機能などを加えられます。詳しくは下記の一覧をご覧ください。

• <input>要素の 他の属性一覧

次回予告

次回は「数値」を入力するための部品 <input type="number"> を使ってみましょう。
これもHTML5からの新しい値です。