Локализация времени в JavaScript
На вашем сайте есть отдельное место для отображения времени. Вы выставили его согласно вашему временному поясу: 3:00 PM Eastern Standard Time. Неплохо было бы иметь возможность конвертировать это значения для любого другого часового пояса.
Конвертация времени задача не из простых: но у нас комп и JavaScript, который знает часовой пояс пользователя.
Я уверен, что существует множество решений данной задачи. Мы же будем следовать варианту, предложенному Dave Rupert, который он реализовал на сайте ShopTalk.
Библиотеки
Данное решение заключается в использовании Moment.js и Moment Timezone. С их помощью можно не только решить нашу задачу, но и добиться отображения времени в следующем формате ("32 minutes ago", "12 de Agosto de 2015").
Так же нам потребуется средство для определения текущего часового пояса пользователя.
Так же мы задействуем:
- jstz.js
- moment.js
- moment-timezone.js
Шаг 1: Определение часового пояса
После определения часового пояса мы запишем это значение в локальное хранилище (localStorage).
if (!sessionStorage.getItem('timezone')) { var tz = jstz.determine() || 'UTC'; sessionStorage.setItem('timezone', tz.name()); } var currTz = sessionStorage.getItem('timezone');
Шаг 2: Получение времени
Нам необходимо получить время в следующем формате (UTC):
2015-08-12T14:30Z
Если нам нужно только время, то используем объект Moment.
var date = moment().format("YYYY-MM-DD");
Затем создаём финальную версию строки, подставив переменную с значением текущего времени:
var stamp = date + "T" + theTime + "Z";
Задействуем объект Moment:
var momentTime = moment(stamp);
Шаг 3: Преобразование времени
Теперь можем конвертировать время при помощи объекта Moment Timezone:
var tzTime = momentTime.tz(currTz);
Приводим результат в нужный нам вид:
var formattedTime = tzTime.format('h:mm A');
Шаг 4: Вывод
Теперь можем отобразить полученное значение в любой части страницы:
output.textContent = "Time in " + currTz + ": " + formattedTime;
Модификация времени
Иногда может возникнуть необходимость сбора времени от пользователя согласно их часовому поясу и конвертации в UTC.
Moment и в этом может быть полезен:
moment().subtract(4, 'hours'); moment().add(3, 'hours');
То же самое можно сделать и на серверном языке (PHP):
<?php var $sixHoursAgo = strtotime("-6 hours", time()); ?>
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://css-tricks.com/localizing-times-in-javascript/
Перевел: Станислав Протасевич
Урок создан: 30 Апреля 2016
Просмотров: 8620
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.