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

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

表示

Chrome と Opera

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

Firefox

Firefox の time コントロールは Chrome のものとよく似ていますが、上下の矢印がなく、12時制です (午前と午後を指定する追加のスロットがあります)。 (訳注: 日本語のロケールでは24時制になっているようです。)

Edge

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

時刻を表す 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" です。

この例では、時刻を入力すると 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 属性の利用を参照してください)。

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分単位で時刻が動くように)。/p>

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

これは整数の値を取り、増加させたい秒数と同じ値になります。既定値は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) に一致しない文字列を入力して送信しようとすると、エラーメッセージが表示される (そして入力欄が無効として強調表示される) のが分かるでしょう。もちろん、これではユーザーが無効な日付を入力したり、誤った形式で日付や時刻を入力したりすることを止めることはできません。

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

ブラウザーに依存しない方法によってフォームで時刻を扱う最善の方法は、現時点では、時と分 (及び必要であれば秒) を別々なコントロール (<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> 要素に入れる時と分の値は、動的に生成されます。

もう一つの面白い部分は、機能の検出コードです。ブラウザーが <input type="time"> に対応しているかどうかを検出するために、新たな <input> 要素を生成し、その typetime に設定して、すぐに 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"> の定義
現行の標準

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応201257 なし10 なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり20 あり57 あり なし ?

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,