⬆️ ⬇️

Javascript and time zones - the correct time on the site

There is still confusion when implementing local time on the site. A significant contribution to this confusion was made by Russian lawmakers with the periodic abolition of the transition to winter time. Do you know what time zone we have now +3 or +4 hours? That is the majority of users do not know. But there is a very simple solution how not to burden the user with this problem! It is necessary to use the time of the device (we assume that this is the correct local time). The obvious solution is to use the getTimezoneOffset javascript function is fundamentally wrong. Why? Read on.



How should everything work? If the user sends his message for example on the forum at 12:15 (according to the time on his device), then he should see his message on the site with the same time. It would seem that if you use the time zone offset (taken from the browser from getTimezoneOffset), then everything should work. But it is not so!



The paradox is that the time zone may be incorrectly set on the user's device. And this is a very common case, because when you change the time zone, many simply transfer the time to a few hours without touching the time zone. And as a result, we have endless branches on the “Set Up Time” technical support forums, which bloom with every winter / summer transfer or during the return from holidays.



The most correct thing is to set the local time on the site in accordance with the time set on the user's device, not paying attention to the time zone. We presume that on the server all dates are stored in the database in GMT format (and this is correct). Thus, for the correct output of dates (time) in the user's browser, it is necessary to calculate the offset between the browser and server times.

')

On the server, the current time in php can be obtained by the function time (), in the browser by the function javascript Date (). And then the time zone offset can be calculated using javacript like this:



//  time_zone     var d = new Date(); var loc = Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds()); var time_zone = ((<? echo time();?> - loc/1000)/60).toFixed(0); 


Next, you need to transfer the time_zone value to the server and output the time from the database, taking into account this offset. For example, if the time is stored in the database in seconds, then for output to the browser we use the following (in php):



 //      -    $t = $time_fromDB - $time_zone*60; 


The above is a two-step method:

1. First, time_zone is calculated

2. time_zone is sent to the server and is used for further time output.



But you can do everything in one stage. In this case, when the page is first loaded into the browser, the time_zone is also calculated (see above) and then all time values ​​are displayed using javacript. For example, using the following mydate () function:



 function two(num) { return ("0" + num).slice(-2);} //    // t -       // mydate      12.08.2015 19:03 function mydate(t) { var d = new Date((t-time_zone*60)*1000); return two(d.getUTCDate())+'.'+ two(d.getUTCMonth()+1)+'.'+d.getUTCFullYear()+' '+ two(d.getUTCHours())+':'+ two(d.getUTCMinutes()); } 


All of the above is successfully used in our project of a messenger, where it has proven itself in all browsers and operating systems (mobile and desktop). Unlimited use of the algorithm given here is possible in your projects. Welcome to the source code link to our project magdialog.ru .

Source: https://habr.com/ru/post/264657/



All Articles