A little task — to bring a date

I want to tell you about a simple task — finding a date on the main page Mail.Ru. Small problem, nontrivial solution.



The decision in a forehead:

the

function print_date(date){
return date.getDate () + ' of ' + getMonth(date.getMonth()) ...
}

print_date( new Date() );

Recently there is another block on the page. Started the world hockey championship, and it should display the beginning of the match. But the time each user needs to be synchronized with its time zone.



Not too difficult — from the server we get the timestamp of the beginning of the match. The client called already made us feature.

the

print_date( new Date(timestamp) );

However, it is not always possible to correctly automatically determine the user's region. For example, my home ISP in our area began to give out IP addresses from the range, which he did not have before. All portals offered me different places on our planet, but one thing they all agreed: I do are far away from Moscow. It is for these situations we offer the user to select the city on your own.

Naturally, all dates must be synchronized with the selected city, and this means that the current displacement of the user relative to the Greenwich mean time may be incorrect.

We have the timestamp of the beginning of the match and timezone of the selected city. On the client do date and move it to the difference between the current offset and the offset in the selected city.

the

var date = new Date(timestamp);
date.setMinutes(town_offset + date.getTimezoneOffset())

print_date(date)

Why plus between town_offset and date.getTimezoneOffset(), can be read here: developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset#Description

Now, if the user is in Vladivostok, but chose Moscow, we adjust the Date object to the difference between these two cities.

With the conclusion of the start time of the match was OK, but there's still the current date. And it is not so smooth. When displaying a date of the match, we use the timestamp from the database, and when outputting the current date we use new Date() on the client.

the

var date = new Date();
date.setMinutes(town_offset + date.getTimezoneOffset())

print_date(date)

This means that we use the timestamp of the user's computer. The user can manually translate his watch, and then we get the current timestamp is incorrect. Therefore, the current timestamp, we are forced to pass from the server.

the

var date = new Date(server_timestamp);
date.setMinutes(town_offset + date.getTimezoneOffset())

print_date(date)

But this is not the end of the clock on the main page needs to tick, even if we can't trust user timestamp, but the timestamp offset is relative to page load, you can rely on. That the user will bring down a local clock in the middle of watching the news in the main, to be laid will not.

the

var begin = new Date().getTime();

function get_delta(){
return new Date().getTime() - begin;
}

function update_time(){
var date = new Date(server_timestamp + get_delta());
date.setMinutes(town_offset + date.getTimezoneOffset())

print_date(date)
}

Andrey Sumin
Project Manager client side Mail.Ru the company Mail.Ru Group

Egor Dydykin
Team lead of the development team of the portal homepage Mail.Ru the company Mail.Ru Group

Article based on information from habrahabr.ru