Javascript and time zones - the right time on the site
There is still confusion over the implementation of local time on the site. A considerable contribution to this confusion was made by Russian lawmakers with the periodic cancellation of the transition to winter time. Now do you know what time zone we have now is +3 or +4 hours? So most users do not know this. But there is a very simple solution how not to burden the user with this problem! We need to use the device time (we assume that this is the correct local time). The obvious decision to use the javascript getTimezoneOffset 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 (by 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 this is not so!
The paradox is that the time zone may not be correctly set on the user's device. And this is a very common case, since when changing the time zone, many simply transfer the time to several hours without touching the time zone. And as a result, we have endless branches on the technical support forums “Setting the time”, which bloom with each shift of winter / summer hours or during the period of return from vacations.
The most correct thing is to set the local time on the site in accordance with the time set on the user's device without paying attention to the time zone. We assume that on the server all dates are stored in the database in GMT format (and this is correct). Thus, for the correct display of dates (time) in the user's browser, you need to calculate the offset between the time of the browser and server.
On the server, the current time in php can be obtained by the time () function, in the browser by the javascript Date () function. And then the time zone offset can be calculated using javacript like this:
Next, you need to transfer the time_zone value to the server and display 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):
The two-stage method is described above:
1. First, time_zone is calculated
2. time_zone is sent to the server and 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, time_zone is also calculated (see above), and then all the time values are displayed using javacript. For example, using the function mydate ():
All of the above is successfully used in our messenger project, 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. A link in the source code to our project magdialog.ru is welcome .
How should everything work? If the user sends his message, for example, on the forum at 12:15 (by 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 this is not so!
The paradox is that the time zone may not be correctly set on the user's device. And this is a very common case, since when changing the time zone, many simply transfer the time to several hours without touching the time zone. And as a result, we have endless branches on the technical support forums “Setting the time”, which bloom with each shift of winter / summer hours or during the period of return from vacations.
The most correct thing is to set the local time on the site in accordance with the time set on the user's device without paying attention to the time zone. We assume that on the server all dates are stored in the database in GMT format (and this is correct). Thus, for the correct display of dates (time) in the user's browser, you need to calculate the offset between the time of the browser and server.
On the server, the current time in php can be obtained by the time () function, in the browser by the javascript Date () function. 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 = (( - loc/1000)/60).toFixed(0);
Next, you need to transfer the time_zone value to the server and display 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 two-stage method is described above:
1. First, time_zone is calculated
2. time_zone is sent to the server and 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, time_zone is also calculated (see above), and then all the time values are displayed using javacript. For example, using the function mydate ():
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 messenger project, 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. A link in the source code to our project magdialog.ru is welcome .