Как работать с type="time" в javascript?

Question

Есть поля для ввода времени(задает период) в html

<input type="time" id = "period" name="period" step="600">.

Как полученное "время" с помощью строки

var period = document.getElementById( "period" ).value;

преобразовать в миллисекунды или хоть как то с ним работать?

Answer 1

Т.к. оно всегда приходит в виде строки в формате 00:00, проще разбить ее на две части через .split(":") → Важно заметить, что на выходе получается массив из строк, а не чисел. Из-за этого могут возникать ошибки вида "1" + 1 = "11" Хоть в дальнейшем умножение автоматически превращает строку в число, но хорошо бы для страховки при первой возможности вручную сделать из них числа (что и делает унарный +).

var period = document.getElementById("period");

period.addEventListener('input', function(){
  var val = this.value.split(":");
  var hrs = +val[0];
  var min = +val[1];
  
  var ms = hrs * 3600000 + min * 60000;
  
  console.log("Миллисекунды: " + ms);
});

<input type="time" id="period" name="period" step="600" value="15:30">

Другой вариант:

let period = document.getElementById("period");

period.addEventListener('input', function(){
  let [hh, mm] = this.value.match(/\d\d/g);
  
  // match тоже возвращает массив, и мог бы быть использован вместо split
  // См. «Регулярные выражения», «Деструктурирующее присваивание»
  
  let ms = hh * 3600000 + mm * 60000;
  console.log("Миллисекунды: " + ms);
});

<input type="time" id="period" name="period" step="600" value="15:30">

БЛОГ НА HUSL

Как работать с type="time" в javascript?

Ответы (1 шт):