<input type="datetime-local">

ブラウザ
  • Cr
  • O
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素リスト化サブミット可能リセット可能再関連付け可能ラベル付け可能) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容

input要素type="datetime-local" を指定すると、ローカル日時の入力欄を作成できます。

  • この属性値(datetime-local)はHTML 5.1で追加されました。

<input type="datetime-local" name="example1">

<input type="datetime-local" name="example2" value="2012-02-16T20:40">

属性
任意属性(共通)
type="" 部品のタイプ datetime-local ローカル日時の入力欄
name="" 部品の名前 文字列 部品を識別するための名前
value="" 送信される値 日時 入力欄の初期値 (書式: YYYY-MM-DDThh:mm:ss
disabled 部品の無効化 disabled 値は省略可能
form="" [+]フォームとの関連付け ID名 関連付けるform要素に指定したID名
autofocus [+]自動フォーカスの指定 autofocus 値は省略可能、1つの文書に1つだけ指定可能
任意属性
min="" [+]入力できる日時の最小値 日時 最小値 (書式: YYYY-MM-DDThh:mm:ss
max="" [+]入力できる日時の最大値 日時 最大値 (書式: YYYY-MM-DDThh:mm:ss
step="" [+]入力できる日時のステップ 秒数 この値の間隔で入力を可能にする (初期値は 60
any ステップを設定しない
autocomplete="" [+]オートコンプリート on オートコンプリートを有効にする
off オートコンプリートを無効にする
list="" [+]入力候補のリスト ID名 関連付けるdatalist要素に指定したID名
readonly 読み取り専用 readonly 値は省略可能
required [+]入力必須 required 値は省略可能

type属性name属性value属性disabled属性form属性autofocus属性の詳細については、input要素のページを参考にしてください。

このタイプの特徴

ローカル日時を入力するための入力欄です。

(実際の表示例)

このタイプに対応しているブラウザでは、カレンダーやスピナー(上下ボタン)を使って日時を入力することができます。

日時の書式

入力する日時、及びvalue属性min属性max属性の値は、次の書式で記述する必要があります。

YYYY-MM-DDThh:mm:ss
2012-02-16T20:40:30
  • 年は4桁、月・日と時・分・秒は各2桁で入力します。(時間は24時間表記)
  • 年月日と時間をTで区切ります。
  • 0秒ジャストの場合は秒数(:ss)を省略することもできます。
  • 小数点以下の秒数も入力することができます。(ピリオド( . )に続けて1~3桁で記述します)
<input type="datetime-local" name="example" value="2012-02-16T20:40">

秒数単位の入力を求める場合は、step属性の値に 1 などを指定しておきます。(初期値が 60 秒なので)

<input type="datetime-local" name="example" step="1" value="2012-02-16T20:40:30">
  • Opera(12)では、秒数の桁が表示されないようです。

min属性とmax属性について

min属性max属性は、入力できる日時の範囲を指定します。(どちらかのみを指定することも可能です)

  • min属性 … 入力できる日時の最小値を指定します。
  • max属性 … 入力できる日時の最大値を指定します。

次の例では、2012年の日時のみが入力可能となります。

<input type="datetime-local" name="example" min="2012-01-01T00:00" max="2012-12-31T23:59">

step属性について

step属性は、入力できる日時のステップ(入力値の間隔)を秒数で指定します。type="datetime-local" の場合は 60 秒が初期値となります。

次の例では300を指定しているので、5分間隔で入力できることになります。(例:5分、10分、15分 ...)

<input type="datetime-local" name="example" step="300">

秒間隔で入力を可能にする場合は、次のように1などを指定します。(Opera(12)では秒数の桁が表示されないようです)

<input type="datetime-local" name="example" step="1">

値に any を指定すると、ステップは設定されません。

<input type="datetime-local" name="example" step="any">

autocomplete属性について

autocomplete属性は、オートコンプリート機能(入力内容の自動補完)を使うかどうかを指定します。

値には on(使う)または off(使わない)を指定します。この属性を省略した場合は、form要素の設定内容が使用されます。(form要素にも指定されていない場合は on の状態がデフォルトとなります)

<input type="datetime-local" name="example" autocomplete="off">
  • HTML 5.1では、input要素のautocomplete属性に on / off 以外の値も指定できるようになりました(詳しくは仕様書をご覧ください)。これにより、きめ細やかな設定が行えるようになります。

list属性について

list属性は、入力候補リストの表示を指定します。この属性を使用する場合は、datalist要素で入力候補のリストを作成しておく必要があります。

値には、datalist要素に指定したID名を記述します。(datalist要素は、form要素の外に配置することも可能です)

<input type="datetime-local" name="example" list="data1">

<datalist id="data1">
<option value="2012-02-16T00:00"></option>
<option value="2012-02-17T00:00"></option>
<option value="2012-02-18T00:00"></option>
</datalist>
  • この属性を指定した場合、Chrome(55)ではリストの表示が優先されます(リスト内の「その他」を選択するとカレンダーが表示される)。また、Opera(12)ではカレンダーによる入力が優先されます(この属性で指定したリストが表示されない)。

readonly属性について

readonly属性は、そのフォーム部品が読み取り専用であることを指定します。

この属性が指定された部品は、書き換えだけができなくなります。選択することは可能で、データも送信されることになります。

<input type="datetime-local" name="example" readonly>
  • この属性が指定されたフォーム部品は、妥当性のチェックから除外されます。

required属性について

required属性は、そのフォーム部品が入力必須であることを指定します。

<input type="datetime-local" name="example" required>

使用例

min属性とmax属性を指定した例

<p><input type="datetime-local" name="example" min="2012-01-01T00:00" max="2012-12-31T23:59"></p>

表示例

  • 対応しているブラウザでは、2012年のカレンダーしか選択できなくなります。
step属性を指定した例

<p>デフォルト:<input type="datetime-local" name="example1"> (1分)</p>

<p>30秒を指定:<input type="datetime-local" name="example2" step="30"></p>

<p>300秒を指定:<input type="datetime-local" name="example3" step="300"> (5分)</p>

<p>1800秒を指定:<input type="datetime-local" name="example4" step="1800"> (30分)</p>

<p>3600秒を指定:<input type="datetime-local" name="example5" step="3600"> (1時間)</p>

表示例

デフォルト: (1分)

30秒を指定:

300秒を指定: (5分)

1800秒を指定: (30分)

3600秒を指定: (1時間)

  • 時間のスピナーを操作すると、指定した間隔で時間が変化します(対応しているブラウザのみ)。
  • Chrome(55)では、変更したい箇所をクリック(選択)したあとにスピナーを操作します。
  • Opera(12)では、秒数の桁が表示されません。
required属性を指定した例
  • 動作確認のため、送信先としてHTMLファイル(現在のページ)を指定しています。

<form method="get" action="input_datetime_local.html">

<p><input type="datetime-local" name="example" required> <strong>必須</strong></p>

<p><input type="submit" value="送信する"></p>

</form>

表示例

必須

  • 対応しているブラウザでは、送信時に入力内容の妥当性がチェックされ、不備があればエラーメッセージが表示されます。
  • Chrome(55)では、変更したい箇所をクリック(選択)したあとにスピナーを操作します。