<input type="time">

試してみましょう

<label for="appointment">ミーティングの時間を選択してください:</label> <input type="time" id="appointment" name="appointment" min="09:00" max="18:00" required /> <small>オフィスアワーは午前9時から午後6時までです</small> 

label { display: block; font: 1rem "Fira Sans", sans-serif; } input, label { margin: 0.4rem 0; } 

value 属性の設定

<input> 要素が作成されたときに、次のように value 属性に時刻を指定することで、既定値を設定することができます。

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

JavaScript を使用した値の設定

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

const 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 要素の新しい値で置き換えられます。

const startTime = document.getElementById("startTime"); const valueSpan = document.getElementById("value"); startTime.addEventListener( "input", () => { valueSpan.innerText = startTime.value; }, false, ); 

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

追加の属性

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

list

list 属性の値は、同じ文書内にある <datalist> 要素の id です。 <datalist> は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち type と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。

max

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

min

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

readonly

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

step

step 属性は、値が遵守しなければならない粒度を指定する数値、または下記で記述する特別な値 any です。ステップの基準となる値（min を指定した場合は value、それ以外の場合は適切な既定値）と同じ値のみが有効となります。

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

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

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

time 入力欄の使用

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

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

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

入力欄の寸法の制御

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

step 属性の使用

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

増加する秒数を定義する整数値を指定します。既定値は 60 秒です。既定では、ほとんどのユーザーエージェントの時刻 UI は時分を表示しますが、秒は表示しません。 UI に秒数を追加するには、 step 属性に 60 で割り切れない数値を指定するか、 min 値または max 値によって秒数を指定します。

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

分または時間を step として指定するには、分または時間を秒で指定します。たとえば 2 分であれば 120、 2 時間であれば 7200 のようにします。

検証

既定では、 <input type="time"> は入力された値の検証を行いません。ユーザーインターフェイスの実装は一般的に、時刻でないものを入力させないからです。これは便利ですが、値を空文字列 ("") にすることが許されているため、値が正しい時刻文字列であることを完全に信頼することはできません。

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

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

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

上記の例の CSS です。 CSS の :valid および :invalid プロパティを使用して、現在の値が有効かどうかに基づいてスタイルを設定しています。アイコンは、入力欄の隣の <span> における生成コンテンツとして追加します。

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 までの時刻だけが有効として表示されます。この範囲を外れた時刻は無効として表示されます。

最小値と最大値が真夜中をまたぐようにする

min 属性に max 属性よりも大きな値を設定することで、有効な時間帯を、午前0時をまたぐようにすることができます。この機能は他の入力型では対応していません。

const input = document.createElement("input"); input.type = "time"; input.min = "23:00"; input.max = "01:00"; input.value = "23:59"; if (input.validity.valid && input.type === "time") { // <input type=time> が範囲の折り返しに対応している } else { // <input type=time> が範囲の折り返しに対応していない } 

時刻を必須にする

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

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

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

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

例

この例では、 <input type="time"> で作成されたネイティブのピッカーを使用して時刻が選択できます。

HTML

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

CSS

input[type="time"] { 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="date">
• <input type="datetime-local">, <input type="date">, <input type="week">, <input type="month">
• 全般的な <input> およびその操作に使用する HTMLInputElement インターフェイス
• HTML で使われる日付や時刻の形式
• 日付と時刻の選択のチュートリアル