<input type="time">

<input> 要素の time 型は、ユーザーが簡単に時刻 (時と分、任意で秒) を入力できるように設計された入力欄を生成します。

コントロールのユーザーインターフェイスは、ブラウザーによってまちまちです。最近のブラウザーは対応が進んでおり、 Safari は有名なブラウザーの中で唯一実装していません。 Safari やその他の <time> に対応していないブラウザーでは、このコントロールは単純な <input type="text"> に格下げされます。

表示

Chrome と Opera

Chrome/Opera では、 time コントロールはシンプルで、時と分をオペレーティングシステムのロケールに従って12時制または24時制で入力するスロットと、現在選択中の部分を増減するための上下の矢印から成ります。コントロールの値を消去する "X" ボタンが提供されています。

12時制の Chrome の time input 12-hour

24時制の Chrome の time input 24-hour

Firefox

Firefox の time コントロールは Chrome のものとよく似ていますが、上下の矢印があります。これも時刻の入力には、システムのロケールに従って12時制または24時制の書式を使用します。コントロールの値を消去するための "X" ボタンがあります。

12時制の Firefox の time input 12-hour

24時制の Firefox の time input 24-hour

Edge

Edge の time コントロールはいくらかもっと精巧で、時と分を選択するスライドリールが開きます。 Chrome のように、時刻の入力にはシステムのロケールに従って12時制または24時制を使用します。

12時制の Edge の time input 12-hour

24時制の Edge の time input 24-hour

値	時刻を表す `DOMString`、または空欄。
イベント	`change` および `input`
対応する共通属性	`autocomplete`, `list`, `readonly`, `step`
IDL 属性	`value`, `valueAsDate`, `valueAsNumber`, `list`.
メソッド	`select()`, `stepDown()`, `stepUp()`

値

入力欄に入力された時刻を表す DOMString です。 <input> 要素が作成されたときに、次のように value 属性の中に時刻を含めることで、既定値を設定することができます。

<label for="appt-time">予約時刻を選んでください: </label>
<input id="appt-time" type="time" name="appt-time" value="13:30">

次のように、 HTMLInputElement.value プロパティを使って JavaScript の date 値を取得したり設定したりすることができます。

var timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

時刻値の書式

time 入力欄の value は、常に24時制の書式で hh:mm であり、ユーザーのロケール (またはユーザーエージェント) に基づいて選択される入力書式とは関係ありません。時刻が秒を含む場合 (step 属性の使用を参照) は、書式は常に hh:mm:ss です。この入力型で使用される時刻の値の形式について詳しくは、 HTML で使われる日付や時刻の形式の時刻の文字列をご覧ください。

この例では、時刻を入力すると time 入力欄の値が、どのように変化するかを見ることができます。

最初に、 HTML を見てください。これは以前見たラベルと入力欄だけで十分にシンプルですが、 <p> 要素と、 time 入力欄の値を表示する <span> があります。

<form>
  <label for="startTime">開始時刻: </label>
  <input type="time" id="startTime">
  <p>
    <code>time</code> 入力欄の値: <code>
            "<span id="value">n/a</span>"</code>.
  </p>
</form>

JavaScript コードは、 time 入力欄に input イベントを監視するコードを追加し、 input 要素の中身が変更されるたびに呼び出されるようにします。これが発生すると、 <span> 要素の中身が input 要素の新しい値で置き換えられます。

var startTime = document.getElementById("startTime");
var valueSpan = document.getElementById("value");

startTime.addEventListener("input", function() {
  valueSpan.innerText = startTime.value;
}, false);

time 入力欄を含むフォームが送信されると、フォームのデータに含められる前に値がエンコードされます。 time 入力欄のフォームのデータ項目は、常に name=hh%3Amm の形式か、秒が含まれる場合は name=hh%3Amm%3ass の形式になります (step 属性の利用を参照してください)。

追加の属性

すべての <input> 要素で共通する属性に加え、 time 型の入力欄は次の属性にも対応しています。

Attribute	Description
`max`	受け付ける最も遅い時刻、時刻値の書式の構文による
`min`	妥当な入力として受け付ける最も早い時刻
`readonly`	論理属性で、存在する場合、 `time` 入力欄の内容はユーザーが編集できないことを示す
`step`	ユーザーインターフェイスや制約の検証に使用する刻み値

多くのデータ型とは異なり、時刻値は周期的領域を持ち、値が最大値に達すると、最初の値に折り返します。例えば、 min を 14:00 に、 max を 2:00 に設定すると、許可される時間の値は午後2時から始まり、深夜を経て次の日の午前2時で終わります。

`max`

文字列で、受け付ける最も遅い時刻を示し、前述の同じ時刻値の書式で指定します。指定された文字列が妥当な時刻でなければ、最大値は設定されません。

`min`

文字列で、受け付ける最も速い時刻を示し、前述の時刻値の書式で与えられます。指定された値が妥当な時刻の文字列でなければ、最小値は設定されません。

`readonly`

論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 value は、 JavaScript コードから直接 HTMLInputElement.value プロパティを設定することで変更することができます。

メモ: 読み取り専用フィールドは値を持てないため、 required は readonly 属性も指定されている入力欄には効果がありません。

`step`

step 属性は値が吸着する粒度を指定する数値、または後述する特殊な値 any です。刻みの基準値に等しい値 (指定されていれば min、そうでなければ value、どちらも設定されていなければ適切な既定値) のみが妥当となります。

文字列値の any は刻みがなく、どの値でも許可されることを意味します (min や max など、他の制約に制限されます)。

メモ: ユーザーがデータを入力したときには刻みの設定には吸着せず、ユーザーエージェントは直近の妥当な値、同じ距離の値の選択肢が二つあった場合は、正の方向の推奨値に丸められます。

time 入力欄では、 step の値は秒数で指定され、 1000 が乗じられます (ミリ秒単位の数値であるため)。 step の既定値は 60 であり、60秒 (1分、60000ミリ秒) を表します。

現時点で、 time 入力欄で step に any の値が何を意味するかが不明確です。これは情報が決定次第、更新されるでしょう。

time 入力欄の利用

日時の入力型の中で time はブラウザーが最も広く対応していますが、まだすべてとは言えないため、日付と時刻を入力する代替手段を提供する必要があり、そうすれば Safari のユーザー (およびその他の未対応のブラウザーのユーザー) も簡単に時刻の値を入力できるようになります。

<input type="time"> の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの互換性の問題を緩和するアドバイスを提供しましょう (ブラウザーの互換性の扱いを参照してください)。

時刻入力欄の基本的な使用

もっとも単純な <input type="time"> の使用方法は、次のような基本的な <input> と <label> 要素の組み合わせです。

<form>
  <label for="appt-time">予約時刻を選んでください: </label>
  <input id="appt-time" type="time" name="appt-time">
</form>

入力欄の寸法の制御

<input type="time"> は、 size のようなコントロールの寸法に関する属性には対応していません。寸法を変更する必要がある場合は、 CSS を使用する必要があります。

step 属性の使用

step 属性を使用して、時刻を上下させるときに加減する時間の大きさを変更することができます (例えば、小さな矢印ウィジェットをクリックしたときに10分単位で時刻が動くように)。

このプロパティはブラウザー間で異なる結果になることがあり、完全に信頼できるものではありません。

これは整数の値を取り、増加させたい秒数と同じ値になります。既定値は60秒、または1分です。60秒 (1分) よりも小さな値を指定した場合は、 time 入力欄は時と分の隣に秒の入力領域を表示します。

<form>
  <label for="appt-time">予約時刻を選んでください: </label>
  <input id="appt-time" type="time" name="appt-time" step="2">
</form>

上下の操作を行う矢印を表示するブラウザーである Chrome と Opera では、矢印をクリックすると秒の値が2秒単位で変わりますが、時と分には影響しません。分 (または時) の刻みは、分 (または時) の数を秒数で指定した場合のみ使用されます (120 で2分刻み、 7200 で2時間刻みなど)。

Firefox では矢印はなく、 step の値は使用されません。しかし、この値を提供すると、秒の入力欄が分の部分のとなりに追加されます。

step の値は Edge には効果がないようです。

step を使用しても、検証は正しく動作しないようです (次の節にある通り)。

検証

既定では、 <input type="time"> は入力された値の検証を行いません。ユーザーインターフェイスの実装は一般的に、日付でないものの入力をさせないからです。 (time 入力欄をユーザーエージェントが完全に対応していると仮定すれば) これは便利ですが、値を空文字列 ("") にすることが許されているため、値が正しい時刻文字列であることを完全に信頼することはできません。また、およそ妥当な時刻に見えるが正しくない値、例えば 25:05 を入力したりすることが可能です。

時刻の最大値と最小値の設定

min および max 属性を使用して、ユーザーが選択できる時刻を制限することができます。次の例では、時刻の最小値を 12:00 に、時刻の最大値を 18:00 に設定しています。

<form>
  <label for="appt-time">予約時刻を選んでください (営業時間 12:00～18:00): </label>
  <input id="appt-time" type="time" name="appt-time"
         min="12:00" max="18:00">
  <span class="validity"></span>
</form>

上記の例の CSS です。 CSS の :valid および :invalid プロパティを使用して、現在の値が有効かどうかに基づいてスタイルを設定しています。アイコンは入力欄そのものではなく、入力欄の隣の <span> に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute;
  content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}

ここでの結果は次のようになります。

12:00 から 18:00 までの時刻だけが有効として表示されます。この範囲を外れた時刻は無効として表示されます。
使用しているブラウザーによっては、指定された範囲を外れた時刻が選択できることが分かります (Edge など)。

時刻を必須にする

加えて、 required 属性を使用して、時刻の入力を必須にすることができます。結果として、対応するブラウザーでは設定範囲外または空欄の time 入力欄を送信しようとすると、エラーを表示します。

例を見てみましょう。時刻の最小値と最大値を設定し、かつ入力欄を必須に設定しています。

<form>
  <div>
    <label for="appt-time">予約時刻を選んでください (営業時間 12:00～18:00): </label>
    <input id="appt-time" type="time" name="appt-time"
           min="12:00" max="18:00" required>
    <span class="validity"></span>
  </div>
  <div>
      <input type="submit" value="フォームを送信">
  </div>
</form>

フォームに不完全な時刻 (または設定された範囲外の時刻) を設定して送信しようとすると、ブラウザーはエラーを表示します。例を実行してみてください。

time 入力欄に対応していないブラウザーを使用している場合は、こちらのスクリーンショットを参照してください。

重要: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) が送信された場合に災害が発生するおそれがあります。

ブラウザーの対応の扱い

前述の通り、 Safari やその他の少数派のブラウザーは、まだ time 入力欄にネイティブに対応していません。一般に、それ以外では、よく対応されています。 — 特にモバイルプラットフォームでは、時刻の値を指定するのにとても良いユーザーインターフェイスを持つ傾向があります。例えば、 Android 版 Chrome の time ピッカーは次のようになっています。

対応していないブラウザーでは、文字列入力欄に安全に格下げされますが、これはユーザーインターフェイスの一貫性 (表示されるコントロールが異なること) とデータの扱いの両方で問題を生みます。

2番目の問題はより深刻です。すでに述べたように、 time 入力欄では、実際の値が常に hh:mm または hh:mm:ss の書式で正規化されます。一方、文字列入力欄では、既定でブラウザーは時刻がどの書式で入力されるかの認識がなく、以下のように人間が時刻を書く様々な方法で入力される可能性があります。

3.00 pm
3:00pm
15:00
午後3時
etc.

これを回避する方法の一つとして、 time 入力欄に pattern 属性を付けるという方法があります。 time 入力欄はこれを使用しないので、 text 入力欄にフォールバックされたときにに使用されます。例えば、次の例を未対応のブラウザーで見てみてください。

<form>
  <div>
    <label for="appt-time">予約時刻を選んでください (営業時間 12:00～18:00): </label>
    <input id="appt-time" type="time" name="appt-time"
           min="12:00" max="18:00" required
           pattern="[0-9]{2}:[0-9]{2}">
    <span class="validity"></span>
  </div>
  <div>
      <input type="submit" value="フォームを送信">
  </div>
</form>

nn:nn のパターン (n は数字の0から9) に一致しない文字列を入力して送信しようとすると、エラーメッセージが表示される (そして入力欄が無効として強調表示される) のが分かるでしょう。もちろん、これではユーザーが無効な日付を入力したり、誤った形式で日付や時刻を入力したりすることを止めることはできません。

それから、ユーザーからはどの様な時刻の書式が期待されているかが正確にわからないという問題があります。

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute;
  content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}

ブラウザーに依存しない方法によってフォームで時刻を扱う最善の方法は、現時点では、時と分 (および必要であれば秒) を別々なコントロール (<select> 要素が一般的です。以下の実装を見てください) にするか、 jQuery timepicker plugin のような JavaScript ライブラリを使用することです。

例

この例では、時刻を選択するユーザーインターフェイスの要素を2組生成します。ネイティブの <input type="time"> 入力欄と、ネイティブの入力に対応しない古いブラウザー向けの、2つの <select> 要素による時刻選択です。

HTML は次のようになります。

<form>
  <div class="nativeTimePicker">
    <label for="appt-time">予約時刻を選んでください (営業時間 12:00～18:00): </label>
      <input id="appt-time" type="time" name="appt-time"
             min="12:00" max="18:00" required>
      <span class="validity"></span>
    </div>
  <p class="fallbackLabel">予約時刻を選んでください (営業時間 12:00～18:00):</p>
  <div class="fallbackTimePicker">
    <div>
      <span>
        <select id="hour" name="hour">
        <label for="hour">時</label>
        </select>
      </span>
      <span>
        <select id="minute" name="minute">
        <label for="minute">分</label>
        </select>
      </span>
    </div>
  </div>
</form>

<select> 要素に入れる時と分の値は、動的に生成されます。

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute;
  content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}

もう一つの面白い部分は、機能の検出コードです。ブラウザーが <input type="time"> に対応しているかどうかを検出するために、新たな <input> 要素を生成し、その type を time に設定して、すぐに type に何が設定されたかをチェックします。 time 型に対応していないブラウザーでは、 time 型が text 型へフォールバックされます。 <input type="time"> に対応していない場合は、ネイティブの時刻入力欄を非表示にしてフォールバック用の (<select>) による選択ユーザーインターフェイスを表示します。

// 変数の宣言
var nativePicker = document.querySelector('.nativeTimePicker');
var fallbackPicker = document.querySelector('.fallbackTimePicker');
var fallbackLabel = document.querySelector('.fallbackLabel');

var hourSelect = document.querySelector('#hour');
var minuteSelect = document.querySelector('#minute');

// 最初はフォールバックを非表示にする
fallbackPicker.style.display = 'none';
fallbackLabel.style.display = 'none';

// 新しい日付入力が文字列入力にフォールバックされるかどうか
var test = document.createElement('input');
test.type = 'time';
// もし文字列入力になるならば、 if() {} ブロックの中のコードを実行する
if(test.type === 'text') {
  // ネイティブの日付選択を隠してフォールバック版を表示
  nativePicker.style.display = 'none';
  fallbackPicker.style.display = 'block';
  fallbackLabel.style.display = 'block';

  // 時と分を動的に生成する
  populateHours();
  populateMinutes();
}

function populateHours() {
  // 時刻の <select> に営業時間の6時間分を生成する
  for(var i = 12; i <= 18; i++) {
    var option = document.createElement('option');
    option.textContent = i;
    hourSelect.appendChild(option);
  }
}

function populateMinutes() {
  // 分の <select> に1時間内の60分を生成する
  for(var i = 0; i <= 59; i++) {
    var option = document.createElement('option');
    option.textContent = (i < 10) ? ("0" + i) : i;
    minuteSelect.appendChild(option);
  }
}

// 時が18になったら、分を00に設定する
// — 18:00 以降を選択できなくする
 function setMinutesToZero() {
   if(hourSelect.value === '18') {
     minuteSelect.value = '00';
   }
 }

 hourSelect.onchange = setMinutesToZero;
 minuteSelect.onchange = setMinutesToZero;

仕様書

仕様書	状態	備考
HTML Living Standard <input type="time"> の定義	現行の標準

ブラウザーの互換性

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
`type="time"`	Chrome 完全対応 20	Edge 完全対応 12	Firefox 完全対応 57	IE 未対応なし	Opera 完全対応 10	Safari 未対応なし補足未対応なし補足補足 See bug 200416.	WebView Android 完全対応あり	Chrome Android 完全対応 25	Firefox Android 完全対応 57	Opera Android 完全対応あり	Safari iOS 未対応なし	Samsung Internet Android 完全対応 1.5

凡例

完全対応: 完全対応
未対応: 未対応
実装ノートを参照してください。: 実装ノートを参照してください。