<input type="time">

<input type=time>

[4] HTMLinput 要素type 属性time とすると、 時刻を指定するフォーム制御子となります。

ここで指定できる時刻には、 日付時間帯の情報は含まれません。
ここで指定できるのは1の中の時刻であり、 時間の長さではありません。

[5] 仕様書:

構文

[6] DOM 内やフォーム提出時に用いられる値は、 ISO 8601プロファイルであり、 次のような構文を有します。

十進数しなければなりません。 必要なら零埋めしなければなりません

WF2 2.4

[14] 時刻は0以上24時間以下しなければなりませんWF2 2.4

[3] 閏秒に関しては、 datetime (>>14) の項を参照してください。

[7] 23:59:00.00000 WF2 2.4

[3] 00:00:05 WF2 2.4

メモ

[16] 零点は、 00:00 です。 WF2 2.4.2

属性との関係

[8] step 属性単位の精度を表します。 既定値60 (1) です。 WF2 2.4

レンダリング

[9] 利用者エージェントは適切な widget、 例えば時計を使うことが期待されます。 WF2 2.4

[15] 利用者エージェントは、利用者に対し、 時間帯の情報が含まれないことを明らかにするべきです。 WF2 2.4

[21] 時刻は、12時間制24時間制で表示されるのが普通です。 理屈の上では30時間制やその他の時刻制度で表示することもできるのですが、 実際にそのような表示をする利用者エージェントの存在は確認されていません。

[22] 夜間の時間帯を選択させるような場合は30時間制で表示してくれる方が嬉しかったりするんですが。

互換性

[13] 未対応利用者エージェントとの互換性

month に対応していない利用者エージェントは、 text (単一行文章入力制御子) として扱います。従って、利用者は任意の文字列を入力することができます。

ですから、著者は、対応している利用者エージェントが一般的になるまでの間、 フォーム制御子の近くで記入方法を説明しておくのがよいでしょう。 フォーム処理エージェントは記入された値が適当か検査するべきです (これは安全性の観点からも重要です)。

歴史

[10] この input typeWeb Forms 2.0 で導入されました。

実装

[11] Opera 9 が実装しています。

関連

[12] input type として、日付のための date日付時刻のための datetimedatetime-local などがあります。

メモ

[61] (X)HTML5 Tracking ( 版) http://html5.org/tools/web-apps-tracker?from=2433&to=2434

[62] IRC logs: freenode / #whatwg / 20090909 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20090909#l-714

[63] IRC logs: freenode / #whatwg / 20100413 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20100413#l-70

[64] IRC logs: freenode / #whatwg / 20100820 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20100820#l-218

[65] Web Applications 1.0 r5406 note that japan styles year and year-month specially, so that we can support that, once we've proved that this actually gets used at all ( ( 版)) http://html5.org/tools/web-apps-tracker?from=5405&to=5406

[66] Web Applications 1.0 r8203 Allow type=time to have min>max, so that times can span midnight. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8202&to=8203

[1] Chrome は、

[2] iOSSafari は対応しているけど MacSafari は対応していないらしい。 おかしいだろ...

[17] iOSSafaristep 属性に未対応で、常に分単位でしか指定できないらしい。

[18] iOSSafari は実は DOM レベルでは step 属性に対応しているようです。 step IDL属性は仕様通りに動作するようですし、 stepUp メソッドstepDown メソッドstep 属性の指定通りに動きます。 step 属性が省略されたときに step=60 相当になるのも仕様通り。

ところが UI 側はこれにまったく影響されず、常に step=60 相当の表示と編集しかできません。 DOM 側からそのことを知るのは困難。

[19] 仕様書と ChromeFirefox では、 値が step の整数倍になっていないとき、 stepUp/stepDown で近い整数倍の値になります、 iOSSafari ではそうではなく、 step 分加算されるだけです。 Mac OS XSafari は不明。

[20] WindowsChrome では、 ミリ秒単位まで編集できます。 step に対して不適切な値が指定されたときでも、 初期状態ではミリ秒単位で指定された値が表示されます。 編集すると step を考慮した値になります。

step=any にしていると、 指定されている値に端数がなければ、 時と分しか表示されない状態になります。 UI から秒とそれ以下を編集できる状態にする方法がなさそうです。

step に関わらず、 ミリ秒より小さな値は編集された時点で失われます。

[23] New WebKit Features in Safari 14.1 | WebKit () https://webkit.org/blog/11648/new-webkit-features-in-safari-14-1/

[24] WindowsChrome で表示される時刻選択ウィジェットの選択肢リストは、 選択中の値の前後7つしか表示されなくて (スクロールバーなどもなく) マウス操作でそれ以外に変更できません。 (キーボード操作ならそれ以外にも変更できるのですが、 キーボードが使えるなら選択肢リストを開かずに直接テキストボックスに数字を書けばいいので、 意味不明。。。)