Small task - to display the date

I want to talk about a simple task - displaying the date on the main Mail.Ru page. Small task, non-trivial solution.



Solution to the forehead:
')

function print_date(date){ return date.getDate() + ' ' + getMonth(date.getMonth()) … } print_date( new Date() ); 

Recently there was another block on the page. The World Hockey Championship has begun, and the beginning of the match should be displayed. But the time for each user must be synchronized with his time zone.



It is also not too difficult - the timestamp of the start of the match comes from the server. On the client we cause function already made by us.

 print_date( new Date(timestamp) ); 

However, it is not always possible to automatically determine the user's region automatically. For example, my home provider in our area began to issue IP addresses from a range that he did not have before. All portals offered me different places on our planet, but they all agreed on one thing: I’m definitely far from Moscow. For such situations, we offer the user to choose a city on their own.

Naturally, all dates should be synchronized with the selected city, and this means that the user's current offset relative to Greenwich may be incorrect.

We have the start timestamp of the match and the time zone of the selected city. On the client, we make a date and shift it by the difference between the current offset of the user and the offset in the selected city.

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

Why plus between town_offset and date.getTimezoneOffset (), you can 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 for the difference between these two cities.

With the conclusion of the start time of the match figured out, but there is also the current date. And with her, not everything is so smooth. When displaying the date of the match, we use the timestamp from the database, and when displaying the current date, we use new Date () on the client.

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

And this means that we use the timestamp of the user's computer. The user can manually transfer his watch, and then we get an incorrect current timestamp. Therefore, we also have to transfer the current timestamp from the server.

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

But this is not the end - the clock on the main page should “tick”, even if we cannot trust the user timestamp, but you can rely on the timestamp offset relative to the page load. We will not pledge that the user will knock down a local clock in the middle of watching the news on the main one.

 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
Head of client-side development for Mail.Ru, Mail.Ru Group

Yegor Dydykin
Timlid team development the main page of the portal Mail.Ru, the company Mail.Ru Group