3

Появилась на сайте необходимость выводить время относительно локального часового пояса каждого пользователя. Дату на сервере храню в unixtimestamp. Я сначала подумал хранить временную зону на сервере, вместе с профилем пользователя, при этом в первый раз определить её через javascript автоматически, а потом предоставить пользователю возможность её изменять.

Но, как оказалось, javascript не умеет определять timezone из ОС и в придачу вообще не умеет работать с временными зонами, а только со смещением.

Что бы это работало, нужно просить пользователя вручную указать текущую временную зону, без автоопределения, а для ajax вычислять смещение средствами PHP и передавать её в javascript.

Но всё это слишком накладно. Современный пользователь на столько ленивый и глупый, что он в принципе может не знать название своей временной зоны, и указывать её не верно, без подсказки автоопределения просить об этом пользователя накладно. С другой стороны, популярные соцсети и видеохостинги прекрасно справляются с этой задачей и при этом не просят пользователя указывать временную зону.

Вот вопрос, как мне не прося пользователя указывать его временную зону, выводить время средствами PHP и JS, в родной часовой зоне для каждого пользователя, и как, например, эту задачу решают вконтакт и ютуб?

10
  • Соцсети решают этот вопрос определяя регион пользователя по IP.
    – YuS
    15 окт 2016 в 16:02
  • @YuS, а если я через tor, vpn или прокси, зайду не ужели они мне покажут это во времени относительно расположения оных? 15 окт 2016 в 16:06
  • @IlyaIndigo, чем вас не устраивает смещение, которое отдает js? Оно в секундах считается. Отнимайте его от unixtimestamp и получайте время юзера.
    – Visman
    15 окт 2016 в 16:08
  • 1
    На этом сайте так и делается - через js идет пересчет.
    – Visman
    15 окт 2016 в 16:30
  • 1
    Посмотрите как moment.js работает (он показывает правильную временну́ю зону)
    – jfs
    30 мар 2017 в 9:35

1 ответ 1

0

Решил задачу достаточно элегантно.

Так как JS не умеет определять локальную временную зону, но умеет форматировать unixTimeStamp в локальное время, придётся забыть про передачу форматированной временной строки с сервера, и передавать клиенту unixTimeStamp для последующего форматирования в локальное время силами JS. Что бы сделать заполнение данных локальным временем менее заметным для пользователя, а также код на сервере не изменять, вместе с unixTimeStamp на место локального времени всегда передаём время по Гринвичу.

Порядок решения таков.

1 В PHP форматируем время всегда только по Гринвичу, используя gmdate(), а также назначаем класс dateTime элементу, содержимое (innerHTML) которого нужно будет форматировать. В один из атрибутов этого элемента data-date-time, data-date, data-time, помещаем unixTimeStamp в зависимости от того, во что его нам нужно форматировать.

<p>Дата со временем: <span class="dateTime" data-date-time="<?=$date?>"><?=gmdate('d.m.Y (H:i)',$date)?></p>
<p>Дата: <span class="dateTime" data-date="<?=$date?>"><?=gmdate('d.m.Y',$date)?></p>
<p>Время: <span class="dateTime" data-time="<?=$date?>"><?=gmdate('H:i',$date)?></p>

2 В числовом прототипе JS определяем удобные методы для форматирования времени и определяем удобную функцию dateTime(), которая после загрузки документа получит все элементы, нуждающиеся в форматировании и заменит их время/дату/дату со временем, в зависимости от того, в каком атрибут будет помещён unixTimeStamp с Гринвича на локальное время. Вызываем нашу функцию dateTime() после окончания загрузки документа.

<script type="application/javascript">
<!--
    'use strict'; 
    Number.prototype.time=function()
    {
        return new Date(this*1000).toLocaleString('uk',{'hour':'numeric','minute':'numeric'});
    }
    Number.prototype.date=function()
    {
        return new Date(this*1000).toLocaleString('uk',{'day':'numeric','month':'numeric','year':'numeric'});
    }
    Number.prototype.dateTime=function()
    {
        return this.date()+' ('+this.time()+')';
    }
    function dateTime()
    {
        let doc=document.getElementsByClassName('dateTime');
        for(let l=doc.length,i=0;l>i;++i)
            if(typeof doc[i].dataset.dateTime=='string')
                doc[i].innerHTML=parseInt(doc[i].dataset.dateTime).dateTime();
            else if(typeof doc[i].dataset.date=='string')
                doc[i].innerHTML=parseInt(doc[i].dataset.date).date();
            else if(typeof doc[i].dataset.time=='string')
                doc[i].innerHTML=parseInt(doc[i].dataset.time).time();
    }
    window.addEventListener('load',dateTime);
//-->
</script>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.