Как получать значение из дата атрибута, которое будет подставляться в объект date?

Question

[olya095]

есть таймер
в переменной deadline лежит значение
к которой нужно отчитывать время

но если задавать время таким образом, но проблема будет с редактированием
нужно как-то держать их в дата-атрибуте
и потом как-то получать

https://jsfiddle.net/yLdw2haj/

Comments

[Nikolay Matyushkin]

Что б писать в дата атрибут, надо:

let timer = document.querySelector('.timer');
timer.setAttribute('data-time', '01.10.2021 18:30');

Что б получить значение дата аттрибута, надо:

let timer = document.querySelector('.timer');
return timer.getAttribute('data-time');

[olya095]

Devilz_1, это что?)

[Nikolay Matyushkin]

olya095, так понятнее?))

[olya095]

Devilz_1, объект date работает не так

[Nikolay Matyushkin]

olya095, я написал про аттрибут дата. Вам надо взять дату из атрибута "data-timer" и подставить её в экземпляр класса Date ? Правильно?

[olya095]

Devilz_1, правильно. Только такую строку он не примет

[Nikolay Matyushkin]

Конечно не примет. Вот так сработает

const timerData = document.querySelector('.timer').getAttribute('data-time');
const [day, month, year, hours, minutes] = timerData.replace(/[:.]/g, ' ').split(' ');

нужные значения в нужном порядке определите в экземпляр объекта Date

[olya095]

Devilz_1, спасибо
но будет проблема, что там лежат строки
понимаю, что нужно преобразовать, но дает ошибку
https://jsfiddle.net/y2xvb0jc/3/

[Nikolay Matyushkin]

olya095, поменяйте день с месяцем в экземпляре Date

[olya095]

Devilz_1, ок
но проблема в другом - https://jsfiddle.net/38awm6ut/

месяц как-то не совсем корректно считается

[olya095]

Devilz_1, так можно делать? https://jsfiddle.net/wy5av09p/

[Nikolay Matyushkin]

olya095, да, можно. Месяцы в new Date() отсчитываются с нуля. Т.е. 0 - Январь и т.д.

Answer 1

[Сергей Соколов]

Хорошо бы держать в data-атрибуте момент окончания отсчёта в универсальном виде Unix timestamp. Тогда отсчёт не будет зависеть от часового пояса браузера посетителя сайта. Это целое число секунд с 1-го января 1970 по Гринвичу.

Разметка будет примерно такая: <div class="timer" data-till="1635800892"></div>
Получать из неё время просто:

const D = new Date( 1000 * document.querySelector(".timer").dataset.till );

В JavaScript время считают не в целых секундах, а точнее, в миллисекундах, поэтому секундное время из разметки надо домножить на 1000.

Comments

[olya095]

Сергей Соколов, просто дату будут редактировать
не проблема?

[Сергей Соколов]

olya095, в чем вы видите проблему?

[olya095]

Сергей Соколов,как его получить. Сейчас у меня так - https://jsfiddle.net/wy5av09p/
вроде корректно работает

[Сергей Соколов]

olya095, в бэкенде на PHP можно через strtotime():

$ts = strtotime('2021-12-01T12:00:00Z');
// 1638360000
// полдень 1-го декабря в часовом поясе Лондона.
// В Москве в это время будет 15:00

И записать полученный $ts в разметку.

Или в JavaScript:

const ts = Math.floor(Date.UTC(2021, 11, 1, 12) / 1000); 
// 1638360000
// в JS месяцы нумеруются с нуля, поэтому декабрь 11-й.

[olya095]

Сергей Соколов, в JS месяцы нумеруются с нуля, поэтому декабрь 11-й.
__________________________________
а поменять немного можно? чтобы нумерация была с 1 по 12

[Сергей Соколов]

olya095, конечно: добавляйте единицу! )

Оберните в функцию:

function getTimestamp(year, month, day, hour=0, minute=0) {
  return Math.floor(Date.UTC(year, 1 + month, day, hour, minute) / 1000); 
}