Время округления во времени вводится в полные часы или в половинное время

Question

Мне нужно:

XX: 01 - XX: 14, чтобы округлить до XX: 00

XX: 15 - XX: 29, чтобы округлить до XX : 30

XX: 31 - XX: 44 - округление до XX: 30

XX: 45 - XX: 59 - округление до (XX + 1): 00

Примечания:

1. Я дал только два случая в коде, в конечном итоге у меня их больше
2. Например, я добавил дополнительные входы в код которые не используются, они недействительны
3. Они должны автоматически проверять, был ли он введен.

Мой код html:

<table>

<tr class="day"> 
  <td class="forUser1"><input type="time" class="start" id="start_1"></td>
  <td class="forUser2"><input type="time" class="end"  id="end_1"></td>
</tr>

<tr class="day">
  <td class="forUser1"><input type="time" class="start"  id="start_2"></td>
  <td class="forUser2"><input type="time" class="end" id="end_2"></td>
</tr>

</table>

Я пытался:

funtion dist (parting) {
dist = parting.split(":");
const distDate = new Date(0, 0, 0, dist[0], dist[1], 0);
(...)
}


document.querySelector('table').addEventListener('change', function(e) {
  const classList = e.target.classList
  if (classList.contains('start') || classList.contains('end')) {

    const tr = e.target.parentNode.parentNode
    const [start, end] = [...tr.querySelectorAll('.start,.end')]
    (...)
  }
})

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

Answer 1

Возможно, он не самый элегантный, но, похоже, работает:

let start = document.querySelector(".start");
start.addEventListener("change", roundTime);

/*
  01:00 .. 01:14 -> 01:00
  01:15 .. 01:44 -> 01:30
  01:45 .. 01:59 -> 02:00
*/
function roundTime(event) {
  let time = event.target.value.split(":");
  let hours = parseInt(time[0]);
  let mins = parseInt(time[1]);

  if (mins < 15) {
    mins = 0;
  } else if (mins < 45) {
    mins = 30;
  } else if (mins < 60) {
    mins = 0;
    hours = (hours + 1) % 24;
  }

  let rounded = [hours.toString().padStart(2, '0'), mins.toString().padStart(2, '0')].join(":");
  let result = document.querySelector(".result");
  event.target.value = rounded;
}

<input type="time" class="start">

Answer 2

Вы можете просто получить все входные элементы, используя метод querySelectorAll () , а затем добавить прослушиватель change к каждому из них, который будет запускать функцию с именем say, roundFunc, которая будет округлять числа для вас, а затем присваиваете новые округленные числа обратно входному значению.

Проверьте и запустите следующий фрагмент кода или откройте этот JSBin для практического примера вышеупомянутого подхода:

const timeInputs = document.querySelectorAll('table input.start, table input.end');

const roundFunc = e => {
  let x = e.target.value.split(':');
  if (x[1] > 00 && x[1] < 15) {
    x[1] = "00";
  } else if (x[1] > 44 && x[1] < 60) {
    x[0] = x[0] < 10 ? "0" + (parseInt(x[0]) + 1) : parseInt(x[0]) + 1;
    x[1] = "00";
  }
  else {
    x[1] = "30";
  }
  e.target.value = x.join(':');
}

timeInputs.forEach(input => {
    input.addEventListener('change', roundFunc);
});

<table>
  <tr class="day"> 
    <td class="forUser1"><input type="time" class="start" id="start_1"></td>
    <td class="forUser2"><input type="time" class="end"  id="end_1"></td>
  </tr>

  <tr class="day">
    <td class="forUser1"><input type="time" class="start"  id="start_2"></td>
    <td class="forUser2"><input type="time" class="end" id="end_2"></td>
  </tr>
</table>

---

Однако было бы удобнее округлять его при отправке данных в thh, поскольку конечный пользователь не будет сбит с толку изменение чисел по мере их ввода. Чтобы округлить числа, когда вы будете готовы отправить данные на ваш сервер, вы можете просто запустить вышеуказанную функцию roundFunc() прямо перед тем, как отправлять данные.