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

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

[Никита Гуриев]

Я когда-то делал что-то похожее для себя и тоже использовал библиотеку moment.js.

Вот страница с примером и код:

/** Запуск кода раз в секунду */
setInterval(() => {
  let b = moment.utc('2020-07-18T07:50') // Дата отсчета
  let a = moment.utc(new Date()) // Текущая дата
  let years = a.diff(b, 'years') // Разница в годах
  b.add(years, 'years') // Добавляем разницу в переменную b в которой дата отсчета
  let months = a.diff(b, 'months') // Разница в месяцах
  b.add(months, 'months')
  let days = a.diff(b, 'days') // Разница в днях
  b.add(days, 'days')
  let hours = a.diff(b, 'hours') // Разница в часах
  b.add(hours, 'hours')
  let minutes = a.diff(b, 'minutes') // Разница в минутах
  b.add(minutes, 'minutes')
  let seconds = a.diff(b, 'seconds') // Разница в секундах
  b.add(seconds, 'seconds')
  let finalCalc = `${years}.${months}.${days} ${hours}:${minutes}:${seconds} назад` // Подготовка формата текста
  let divTimer = document.getElementById('textTimer') // Занесение DIV'а, в котором будет отображаться таймер в переменную
  divTimer.innerText = finalCalc // Вставка текста (таймера) в DIV
}, 1000)

Вот CodePen:

Answer 2

[alex4answ]

Date

Вы хоть гуглили?

Comments

[Шлёпа Коммунистка]

Вы вопрос хоть читали?

[alex4answ]

Луиджи Вампа, ок понял, но не понял зачем вы парсите дату из объекта Date ?

[alex4answ]

Луиджи Вампа, и почему не сделать diff - объектом Date?
и из него уже брать все значения ?

Answer 3

[Илья Чубаров]

Используйте библиотеку momentjs

Comments

[alex4answ]

Илья Чубаров, ради 1 места использовать либу ?

[Илья Чубаров]

alex4answ, если на этом все закончиться то нет, не использовать. Если есть предпосылки что будет другая работа со временем то да. Если проект маленький то нет не использовать. Если проект предполагается большой и вам кажется что это единственное место где возникнет задача со временем:
- сделать без библиотеки еще много раз, потом ее установить
- сразу установить