<input type="time">
<input type="time"> は、HTML5で追加された <input> タグの type 属性です。
ユーザーが簡単に時刻を入力できるように設計された入力欄を生成します🕛
インターフェイスについて
入力コントロールのユーザーインターフェイスは、ブラウザーによって異なります😷
最近のブラウザでは対応が進んでいますが、 ※Safari はブラウザーの中で唯一実装していません💦
Safari やその他の <time> に対応していないブラウザーでは、<input type="text"> になります。
※iOSの Safari では実装されています。
特にモバイルプラットフォームでは、
時刻の値を指定するのに、それぞれ異なる UI を持っています。
例えば、 Android 版 Chrome の time ピッカーは次のようになっています。
フォーマットについて
time 入力欄の value は、
ユーザーのロケール (又はユーザーエージェント) に基づいて選択される入力書式とは関係なく、
常に24時制の書式で "hh:mm" または "hh:mm:ss" です。
ブラウザ問題 ←本題✅
Android 版 Chrome 環境では
time の値が常に hh:mm:ss の書式で正規化されてしまい
秒数も指定することができてしまいます😢
そこで、秒数の部分を取り除く方法として step 属性というものがあります✌️
step 属性について
step 属性は時刻を上下させるときに加減する時間の大きさを変更することができます！
↓例えば、5秒単位で時刻が動くようにする場合は以下のようにします。
<input type="time" name="app-time" step="5">
これは整数の値を取り、増加させたい秒数を指定します。
※デフォルト値は60秒 or 1分です
point1
上下の操作を行う矢印を表示するブラウザーである Chrome と Opera では、
矢印をクリックすると秒の値が5秒単位で変わりますが、時と分には影響しません。
時 or 分の刻みは、時 or 分の数を、秒数で指定した場合のみ使用されます
例） step="120" ← 2分刻み、 step="7200" ← 2時間刻み
point2
また、上記のように step="5" と60秒 (1分) よりも小さな値を指定した場合は、
time 入力欄は時と分の隣に秒の入力領域を表示します。 ← 重要
解決方法
つまり、秒数の入力領域を表示させない（秒数を指定させない）ためには
step 属性に60秒 (1分) よりも大きな値を明示的に指定する必要があります
<input type="time" name="app-time" step="60">
これにより time 入力欄の value の書式は "hh:mm" になります👏
最後に
今回はHTML5の <input type="time"> を利用しましたが、
ブラウザーに依存しない方法によって時刻を扱う最善の方法としては、
<select> 要素で時・分・秒を別々のコントロールにすることが一般的だと思います。
または、 jQuery timepicker plugin のような JavaScript ライブラリを使用することが最善でしょう😴
参考
How do I force seconds to appear on an HTML5 “time” input control?