Как получить часы, минуты и секунды из интервала между датами?

Question

У меня есть два поля <input>, где я задаю начало и конец интервала в формате datetime-local, и должен запускать обратный отсчёт (countdown) между этими датами.

<label for="start-date">Начальная дата</label>
<input type="datetime-local" id="start-date" v-model="startDate">

<label for="end-date">Конечная дата</label>
<input type="datetime-local" id="end-date" v-model="endDate">
<button>Старт</button>

Когда я хочу разложить разницу дат (дата конца - дата начала), у меня получается выделить только количество дней. А часы, минуты и секунды - всегда 0. Вот мой код:

timer() {
            
  let start = new Date(this.startDate);
  let end = new Date(this.endDate);
  let diff = Date.parse(end) - Date.parse(start);

  console.log(diff);

  // Преобразование времени в дни, часы, минуты и секунды
  let days = Math.floor(diff / (1000 * 3600 * 24));
  let hours = Math.floor((diff / (1000 * 3600)) % 24);
  let minutes = Math.floor((diff / 1000 / 60) % 60);

  console.log(days + " days " + hours + " hours " + minutes);
}

Answer 1

Если не копировать куски кода, а попытаться разобраться и брать нужные значения у правильных элементов, то код вполне рабочий:

let oStart = document.querySelector('#start-date');
let oEnd = document.querySelector('#end-date');

function timer() {
  let start = new Date(oStart.value);
  let end = new Date(oEnd.value);
  let diff = Date.parse(end) - Date.parse(start);

  // Преобразование времени в дни, часы, минуты и секунды
  let days = Math.floor(diff / (1000 * 3600 * 24));
  let hours = Math.floor((diff / (1000 * 3600)) % 24);
  let minutes = Math.floor((diff / 1000 / 60) % 60);

  console.log((diff >= 0) ? `${days} days ${hours} hours ${minutes} minutes`: 'Конечная дата должна быть позже, чем начальная дата!');
}

<h2>Введите начальную и конечную даты и нажмите "Старт"</h2>
<label for="start-date">Начальная дата</label>
<input type="datetime-local" id="start-date" v-model="startDate">

<label for="end-date">Конечная дата</label>
<input type="datetime-local" id="end-date" v-model="endDate">
<button onclick="timer()">Старт</button>

Непонятно про какие секунды речь - они в коде нигде не фигурируют.

БЛОГ НА HUSL

Как получить часы, минуты и секунды из интервала между датами?

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