Лично я ненавижу работать с часовыми поясами. Я очень быстро запутываюсь, momentjs устарел и JS API для этого не самый лучший. Но что делать, если вы планируете сбросить NFT и хотите отобразить на странице таймер обратного отсчета, который ведет к определенной дате и времени сбрасывания и, что наиболее важно, правильно отображается во всех часовых поясах, включая переход на летнее время? Вы сохраняете его по местному времени? Вы конвертируете его в UTC? Вам нужно рассчитать все эти разные смещения ..?

Решение

Я использовал dayjs для всех своих манипуляций с часовыми поясами и форматирования, но я почти уверен, что этого можно добиться и с помощью чистого JavaScript.
Вот шаги:

1. Преобразуйте дату и время, которое пользователь вводит в UTC. Всегда храните все даты и время в формате UTC. Это довольно легко сделать с помощью JS:

new Date('01-01-2023T09:00:00').toUTCString()

2. Сохраните часовой пояс пользователя. Здесь есть 2 подхода:

  • сохранить в формате IANA
dayjs.tz.guess() // America/Chicago
Intl.DateTimeFormat().resolvedOptions().timeZone // America/Chicago
  • или сохраните необработанное смещение
new Date(input).getTimezoneOffset()/60 // returns in minutes so divide by 60 to get hours

Если бы мы сохранили необработанное смещение (-05:00 или центральное летнее время для меня на момент написания) и добавили его к строке даты позже, как это

new Date('01-01-2023T09:00:00-05:00')

это было бы неправильно, потому что 1 января 2023 года выпадает на летнее время -06:00, поэтому мы уже отстаем на час. Вот почему вместо этого лучше использовать IANA (Америка/Чикаго):

dayjs.utc('01-01-2023T09:00:00').tz('America/Chicago').format()

Это берет нашу дату, сохраненную в формате UTC, и преобразует ее в наш местный часовой пояс. Таким образом, вы или ваши пользователи можете просто ввести дату и время по местному времени, не беспокоясь о преобразованиях часовых поясов. Посетители вашего сайта, где бы они ни находились, увидят правильный таймер обратного отсчета, одинаковый для всех.

Тест

Чтобы проверить это, вы можете вручную настроить датчик в инструментах разработчика Chrome: https://www.browserstack.com/guide/change-time-zone-in-chrome-for-testing
или использовать расширения, например Изменить часовой пояс для Google Chrome™. Если вы все сделали правильно, вы должны увидеть одинаковое количество дней, часов, минут, независимо от того, какой часовой пояс вы выберете.

Хотите без проблем сбросить свою коллекцию NFT? Проверьте Нулевой код NFT!

Ресурсы:

https://day.js.org/en/
https://chrome.google.com/webstore/detail/change-timezone-for-googl/cejckpjfigehbeecbbfhangbknpidcnh?hl=en
https://www.browserstack.com/guide/change-time-zone-in-chrome-for-testing