html - HTML5タグタイプ="時間"

Question

私は次のようなhtml5入力タグを使用します：

<input type="time" name="usr_time" value="19:47:13">

しかし、提出するときは無効な値です。その上、私はそのボックスの秒を変更することはできません、それは無効になっています。誰かがそれを説明できますか？

Answer 1

step 属性を設定してみてください。詳細が不十分な場合は、float 値を使用することもできます。

<input type="time" step="1" />

http://www.w3.org/TR/html-markup/input.time.html

Answer 2

<input type="time" name="usr_time" value="19:47:AM/PM"> 

ここでvalue="1:47:AM"は、秒を変更することはできません。これは 12 時間形式であり、上記のように step=1 を追加すると、value="1:47:55:AM".

Answer 3

これは (現時点では) MS Edge と Chrome でのみサポートされているため、主要なブラウザーで簡単に使用できる小さなコンポーネント ( Timepicker ) を作成しました。

使い方はこんな感じです。

var timepicker = new TimePicker('time', {
  lang: 'en',
  theme: 'dark'
});

var input = document.getElementById('time');

timepicker.on('change', function(evt) {
  
  var value = (evt.hour || '00') + ':' + (evt.minute || '00');
  evt.element.value = value;

});

body {
  font: 1.2em/1.3 sans-serif;
  color: #222;
  font-weight: 400;
  padding: 5px;
  margin: 0;
  background: linear-gradient(#efefef, #999) fixed;
}
input {
  padding: 5px 0;
  font-size: 1.5em;
  font-family: inherit;
  width: 100px;
}

<script src="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>
<link href="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css" rel="stylesheet"/>

<div>
  <input type="text" id="time" placeholder="Time">
</div>