Working with dates and timezones
Hi Guys, Many times I listen that working with dates and timezones is very difficult for developers. There are many libraries like moment.js and date-fns
are there which will solve this kind of problem but some problems like timezone change for the client and server. Suppose your client and your server is in different time zone then when you send date to the client to the server when you store it into the database then it will change to the server timezone and when sending it to the client. the client gets a date but not the same one which the client sent. Because of this problem, I spent more than one hour that how to solve this problem.
Let’s say you’re a front-end developer. You’re just looking to render “February 14”, and have gotten bug reports that users in other time zones are seeing “February 13”. When you dig a bit into this object you see that even when you’re correctly rendering it as “February 14” you’re getting lucky, because the underlying time is sometimes some number of hours off of midnight. You now have a distinct impression that your day is about to be ruined.
why this is happening? how to solve this problem?
Why?
When we use any library or date() then that will convert a date into the server's current timezone so it will change and we can see some time difference between the date sent by the client and the date which is in the server.
- JavaScript always considers dates to be particular moments in time.
- They’re stored as UTC but most methods automatically localize for you.
- Not every date is really something that happened at a particular moment in time.
- In these cases, the JavaScript
Date
object often supplies too much or erroneous information
Solution
You know that your client is from the ABC timezone. so, when you send date from the client then you can also send timezone details and convert that date to ABC timezone and then save it into the database for this you have to take care of timezone details in the database as well.
Using offset
Javascript has one function date.getTimezoneOffset() which return the difference, in minutes, between date, as evaluated in the UTC time zone, and as evaluated in the local time zone.
const localOffset = new Date().getTimezoneOffset();
It gives us a difference of minutes between the local timezone and UTC, We can do like store UTC timezone in the database so whenever we want client date then in server-side we can subtract client offset from time
client-side:
const clientOffset = new Date().getTimezoneOffset();
const clientDate = from_client;
first, check the client and server has the same offset or not. if both have the same offset then don’t need anything. but if both are different then subtract client offset from clientDate and when sending date from server to client then add clientOffset to date.
server-side:
const serverOffset = new Date().getTimezoneOffset();
const minutesDiff = serverOffset - clientOffset;
if (minutesDiff !== 0) {
if (direction === 'CLIENT_TO_SERVER') {
clientDate = moment(clientDate).subtract(minutesDiff,'minutes').toDate();
} else {
clientDate = moment(clientDate).add(minutesDiff,'minutes').toDate();
}
}
How to get client offset?
We can pass client offset with request body and if you want this in every request so also we can use headers.
That’s it.
Yeah, Now you can find it in npm packages.