Локализация времени в 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"

^ Наверх ^