HTML5: длительность типа ввода

Question

Есть ли способ использовать тип ввода длительности . Я пытаюсь сделать так, чтобы пользователь добавлял продолжительность времени примерно так: 06:30:27:15 ( hh:mm:ss:ms ) и должен позволять только (0-23:0-59:0-59:0-59).

любую помощь, оцениваемую!

ПРИМЕЧАНИЕ!: Я хочу реализовать это в Angular2 +.

Answer 1

Может быть попробовать что-то вроде этого:

<input type="time" step="0.001">

Answer 2

<label for="appt">Choose a time for your meeting:</label>

<input type="time" id="appt" name="appt"
       min="09:00" max="18:00" required>

<small>Office hours are 9am to 6pm</small>

Попробуйте это ... Надеюсь, это поможет! Это то, что я сделал для одного из моих проектов ...

Answer 3

К сожалению, ни HTML входы, ни JavaScript сами по себе не поддерживают тип данных продолжительности. <input type="time"> для времени суток и может отображать селекторы AM / PM в зависимости от вашей локали.

Лучше всего работать с текстовым вводом и использовать JavaScript события для автоматической вставки : и игнорировать неверные данные. Использование атрибута pattern также может помочь. Обязательно преобразуйте значение в число, прежде чем использовать его со стороны JavaScript. Вот кое-что, с чего можно начать.

{
  let durationIn = document.getElementById("duration-input");
  let resultP = document.getElementById("output");
  
  durationIn.addEventListener("change", function (e) {
    resultP.textContent = "";
    durationIn.checkValidity();
  });
  
  durationIn.addEventListener("invalid", function (e) {
    resultP.textContent = "Invalid input";
  });
}

input:invalid:not(:focus) { background: red; }

<input id="duration-input" type="text" required pattern="[0-9]{2}:[0-9]{2}:[0-9]{2}:[0-9]{2}" value="00:00:00:00" title="Write a duration in the format hh:mm:ss:ms">

<p id="output"></p>

Я уверен, что есть много библиотек с открытым исходным кодом, которые предоставляют готовый виджет для этого.