php – Working with time zones on the site

Question:

Now the site needs to display the time relative to the local time zone of each user. I store the date on the server in unixtimestamp . At first, I thought of storing the time zone on the server, along with the user profile, at the same time, for the first time, define it automatically via javascript , and then give the user the ability to change it.

But, as it turned out, javascript does not know how to determine the timezone from the OS and, in addition, does not know how to work with time zones at all, but only with an offset.

For this to work, you need to ask the user to manually specify the current time zone, without autodetection, and for ajax calculate the offset using PHP and pass it to javascript .

But this is all too costly. A modern user is so lazy and stupid that he, in principle, may not know the name of his time zone, and it is not correct to indicate it, without the autodetection prompt it would be expensive to ask the user about it. On the other hand, popular social networks and video hosting sites do an excellent job with this task without asking the user to specify the time zone.

Here is the question, how can I, without asking the user to indicate his time zone, display the time using PHP and JS , in the native time zone for each user, and how, for example, is this task solved by vkontakte and YouTube?

Answer:

I solved the problem quite elegantly.

Since JS does not know how to determine the local time zone, but can format unixTimeStamp in local time, you will have to forget about transferring the formatted time string from the server, and transfer the unixTimeStamp to the client for subsequent formatting in local time unixTimeStamp JS. To make the filling of data with local time less noticeable to the user, and also do not change the code on the server, together with unixTimeStamp , we always transfer the time according to Greenwich Mean Time to the local time.

The order of the decision is as follows.

1 In PHP, we always format the time in Greenwich Mean Time using gmdate() , and also assign the dateTime class to the element whose content ( innerHTML ) needs to be formatted. In one of the attributes of this element data-date-time , data-date , data-time , we put unixTimeStamp , depending on what we need to format it into.

<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 In the JS numeric prototype, we define convenient methods for formatting time and define a convenient function dateTime() , which, after loading the document, will receive all the elements that need formatting and replace their time / date / date with time, depending on which attribute will be placed unixTimeStamp from Greenwich to local time. We call our dateTime() function after the document has finished loading.

<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>
Scroll to Top