input 日時入力系

提供: ASCII.jp HTMLリファレンス

(input type="week" から転送)
ver.未対応~ ver.未対応~ ver.14~ ver.5.1~ ver.11.5~
意味 日付、時刻の入力
読み方 インプット

カテゴリー

フロー・コンテンツ
フレージング・コンテンツ
インタラクティブ・コンテンツ
リスト化/ラベル付け可能/送信可能/リセット可能なフォーム関連要素

親にできる要素/カテゴリー

フレージング・コンテンツが期待される場所

子にできる要素/カテゴリー

<input 属性="値">

属性 概要
name 文字列 フィールドの名前
value 文字列 デフォルト値
autocomplete 「on」または「off」 オートコンプリート機能のオン/オフ
list 文字列 datalist要素のID(type="password"の時を除く)
max 日時 入力可能な日時の最大値
min 日時 入力可能な日時の最小値
readonly 論理値 読み込み専用にするかどうか
required 論理値 入力必須にするかどうか
step 数値 ステップ値

グローバル属性

accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title

説明

 type属性の値が「datetime」、「date」、「month」、「week」、「time」、「datetime-local」のinput要素は、日時に関係する値を入力するためのコントロールを表示します。それぞれのtypeで入力できる値は、以下の表の通りです。

type 入力できる値
datetime タイムゾーンを含む日時
date タイムゾーンを含まない日付
month タイムゾーンを含まない年と月
week タイムゾーンを含まない年と週番号
time タイムゾーンを含まない時刻
datetime-local タイムゾーンを含まない日時

 執筆時点でOpera 11.5は、datetime、date、month、week、datetime-localで日付などをカレンダーで選んで入力でき、時刻はスピナーで選択できます。また、Safari 5.1とGoogle Chrome 14では、日時をスピナーで選択できます。

 Internet Explorer 8/9とFirefox 7は、日時系のコントロールの処理は実装されていません。通常の1行入力と同じ動作になります(「type="text"」と同じ)。

上限と下限を制限する属性

 min・max属性では、入力できる日時の下限・上限を指定します(min以上max以下)。いずれの値も、日付・時刻として有効な形式の文字列を指定します。min・maxの片方だけの指定もできます。

 例えば、以下のようなinput要素では、2012年1月1日~2012年2月1日間の日時だけが入力できるように制限されます。

<input type="datetime" min="2012-01-01T00:00:00Z" max="2012-02-01T00:00:00Z">

 なお、Google Chrome 14では、下限・上限を超える値を手動入力して送信すると、エラーメッセージが表示されます。Opera 11.5では、手動入力ができず、指定範囲の日時のみをカレンダーやスピナーで入力できます。
Safari 5.1では、下限・上限を超える値を手動入力して送信してもエラーにはなりません。

ステップを制限する属性

 step属性は、日付や時刻として入力できる値のステップを指定します。type属性の値によって、ステップの単位と標準値は以下のようになります。

type ステップ デフォルト値
datetime 60
date 1
month 1
week 1
time 60
datetime-local 60

 例えば、以下のようなinput要素では、12時~15時の時刻を5分単位で入力するように制限されます。また、標準値は13時になります。

<input type="time" name="tm" value="13:00:00" min="12:00:00" max="15:00:00" step="300">

 なお、Google Chrome 14では、step属性のステップに合わない値を入力して送信しようとすると、エラーメッセージが表示されます。Safari 5.1とOpera 11.5では、step属性のステップに合わない値でも、そのまま送信されます。

その他の属性

 autocomplete、list、readonly、required属性の使い方は、input 1行入力系と同じです。

サンプル

(body要素の内部のみ掲載)

<form action="server.php" method="post">
<p><label>datetime:<input type="datetime" name="dttm"></label></p>
<p><label>date:<input type="date" name="dt" min="2012-01-01"></label></p>
<p><label>month:<input type="month" name="mon" max="2020-12"></label></p>
<p><label>week:<input type="week" name="wk"></label></p>
<p><label>time:<input type="time" name="tm" value="13:00:00" min="12:00:00" max="15:00:00" step="300"></label></p>
<p><label>datetime:<input type="datetime-local" name="dttml"></label></p>
<p><input type="submit" value="送信"></p>
</form>

 各コントロールに以下のような属性を指定しています。

  • 「date」では、日付の下限を2012年1月1日にします(min="2012-01-01")。
  • 「month」では、月の上限を2020年12月にします(max="2020-12")。
  • 「time」では、標準値を13時(value="13:00:00")、12時~15時の時刻を5分単位で入力するように制限します(min="12:00:00" max="15:00:00" step="300")。

サンプル実行画像

 Internet Explorer 9での表示例です。日時系のコントロールの処理が実装されていないため、いずれも1行入力欄が表示されます。

 Google Chrome 14でフォームを開いて、「datetime」に入力した例です。スピナーで日時を選ぶことができます。

 Opera 11.5でフォームを開いて、「date」に日付を入力しようとしているところです。カレンダーで日付を選択できます。

Powered by Web Professional

目次