「input type=time」と「input type=text + timepicker」での動作の違い

やりたこと

せっかくHTMLのデフォルトで「input type=time」が準備されているのだから、できれば使いたい。
input type=text + timepickerとの動作の違いを確認する。

結論

input type=text + timepickerの方が以下の観点で良い。

• 「input type=time」はブラウザによって描画・挙動が違う（参照サイト確認）
• リクエストの内容は同じなのでどちらでもよい

環境

• jQuery3.5.1
• timepicker1.13.14
• Chrome85.0.4183.83

実装

xxx.html

<input type="time" class="ddd" name="bbb" value="12:30">
<input type="text" class="aaa" name="ddd" value="11:30">
<script type="text/javascript">
$(function () {
    $('.text').timepicker({'timeFormat': 'H:i'});
});

表示（左：time,右：text(timepicker)）

何もCSSを当てていない状態。
Chromeの場合は、timeには時計のアイコンが表示される。
個人的にはどっちでもいいかなという感じ。

timeの選択画面

時分を別々で選ぶのって面倒くさくない？
1分単位で選ばせたい場合はこっちの方がいい場合あるのか。
今回は30分単位で選択させたかったのだが、そもそもstepがうまく効かなかった。

text(timepicker)の選択画面

１クリックで選択できる。
ただ1分単位とかになると少しスクロールが面倒くさいかも。

POSTデータ

どちらも同じ。

参照