Преобразование UTC даты в локальное время: JS и jQuery

Быстрый ответ

Если вам требуется оперативно преобразовать временную метку UTC в местное время с помощью JavaScript, для этого отлично подходят объект Date и метод toLocaleString():

const utcDate = new Date('2023-01-28T15:00:00Z');
const localDate = utcDate.toLocaleString();
console.log(localDate);  // Выводит локальное время, соответствующее указанной UTC-дате. Это возможно благодаря JavaScript.

Примечание: new Date() создает новый объект даты на основе строки UTC, toLocaleString() преобразует эту дату в локальное время.

Точное преобразование: учет часовых поясов и перехода на летнее время

При работе с приложениями, которыми пользуются в разных часовых поясах, крайне важно корректно осуществлять преобразование даты с учетом местной временной зоны пользователя и летнего времени (DST).

Определение часового пояса пользователя

Смещение часового пояса пользователя можно узнать таким образом:

const currentOffset = new Date().getTimezoneOffset() / 60;
console.log(`Текущее смещение: ${currentOffset} часов. Готовы к путешествию во времени?`);  // Выводит смещение времени в часовом поясе пользователя

Подробнее об этом расскажет наш спикер на видео

Учет летнего времени

Для точного учета изменений, связанных с переходом на летнее время, рекомендуется использовать библиотеки, такие как moment.js или luxon.js. Они отлично справляются с данной задачей.

Фокус на пользователе

Для того чтобы отображать время в соответствии с локальными предпочтениями пользователя и его часовым поясом используйте метод toLocaleString().

Знакомство с надежными инструментами

Скажем "нет" проблемам связанным с работой с датами и временем, добро пожаловать moment.js и стандарт ISO 8601.

Использование moment.js

const moment = require('moment'); // Подключение библиотеки Moment.js
const localTime = moment.utc(utcDate).local().format('YYYY-MM-DD HH:mm:ss');
console.log(localTime); // Выводит в консоль локальное время с помощью библиотеки moment.js

Особенности формата ISO 8601

Пользуйтесь форматом дат ISO 8601 при работе с сервером, чтобы избежать несоответствий и упростить свою работу.

Рекомендации

1. Согласованность: Рекомендуется использовать для преобразования стабильные и надежные даты в формате UTC.
2. Точность: Убедитесь, что результаты преобразования точно отражают часовой пояс пользователя и учитывают переход на летнее время.
3. Тестирование: Протестируйте работу своего кода в разных часовых поясах и браузерах.
4. Документация: Открывайте для себя новые возможности с помощью официальных источников, как MDN Web Docs.

Визуализация

Вот так выглядит пример преобразования времени из формата UTC в местное:

Время UTC:     12:00 🌍
Местное время: ??:?? 🏠

Процесс преобразования будет выглядеть так:

const localTime = new Date(utcDate).toLocaleString();

А вот и результат:

Время UTC:     12:00 🌍
Местное время: 07:00 🏠

Местное время (🏠) связано с естественным светом (🌅), а не с Гринвичем (🌍).

Хранение местного времени

Сохраняйте преобразованное местное время в переменной для дальнейшего использования.

let userLocalTime = localTime; // Сохраняем время для последующего использования

Вывод: местное время всегда будет у вас под рукой.

Создание функций для преобразования времени

Логику преобразования можно упаковать в простую и удобную функцию.

function convertUtcToLocal(utcDateStr) {
  const date = new Date(utcDateStr);
  return date.toLocaleString();
}

console.log(convertUtcToLocal('2023-01-28T15:00:00Z')); // Пример использования функции для преобразования UTC в локальное время

Можно вызывать эту функцию каждый раз, когда нужно превратить строку UTC в местное время.

Полезные материалы

1. Date.prototype.toLocaleString() – JavaScript | MDN — официальная документация MDN по методу.
2. Convert date to another timezone in JavaScript – Stack Overflow — обсуждение методов конвертации временных зон на Stack Overflow.
3. UTC · Day.js — документация по работе с UTC в Day.js.
4. Moment.js | Docs — руководство по работе с временем UTC в Moment.js.
5. luxon – Immutable wrappers for DateTime — информация о работе с часовыми поясами в Luxon.
6. JavaScript Date Reference — обзор методов объекта Date на сайте W3Schools.
7. Intl.DateTimeFormat – JavaScript | MDN — руководство MDN по работе с DateTimeFormat.