For any application supporting multiple locales and timezones, it is often the requirement to show the date and timestamp adjusted to the user’s local timezone offset. In this tutorial, we will learn to display the date and time in the user timezone.
1. Overview
To display localized timestamps, we have primarily two options:
- Modify the date-time on the server side and return the string to render directly on the client screen
- Return the GMT date to client and let client handle the timezone adjustment and display on the screen
Above both options are easy to implement. The only differences are design and usability challenges that vary from case to case.
2. Adjust the Timezone on Server Side
Timezone adjustment on the server-side can be done for the applications, that are served globally to all users, to display the server output as it is to the screen. In such cases, clients generally do not process the server output and are merely used for displaying the information sent by the server.
Note that HttpRequest
object does not support the timezone information directly, and so many websites ask the user’s timezone at the time of the registration process.
On server-side, we can use Java’s ZonedDateTime
class to convert a given instant to the client’s timezone.
//Suppose this is UTC timestamp fetched from database
ZonedDateTime instant = ZonedDateTime.now(ZoneId.of("UTC"));
ZonedDateTime instantInUTC =
instant.withZoneSameInstant(ZoneId.of("Asia/Kolkata"));
DateTimeFormatter formatter
= DateTimeFormatter.ofPattern("dd MMM, yyyy 'at' HH:mm a");
//Send this to the client for displaying on screen
String formattedZdt = instantInUTC.format(formatter);
System.out.println(formattedZdt); //21 Feb, 2022 at 22:03 pm
3. Adjust the Timezone on Client Side
This is the recommended and most used approach as it does not require the sniffing of the user’s timezone on the server-side. The server sends the UTC date time to all the users across the globe and a client-side script changes the UTC time to local time.
Getting the timezone of the user on the client-side is a rather easy approach and most browsers support query timezone information, including the native javascript.
3.1. Date.getTimezoneOffset()
The getTimezoneOffset() returns the time difference, in minutes, between UTC time and local time. The returned value is positive if the local time zone is behind UTC and negative if the local time zone is ahead of UTC.
For example, if your time zone is UTC+5, the getTimezoneOffset() method will return -300 minutes:
var date = new Date();
var offset = date.getTimezoneOffset(); // -300
Remember that the getTimezoneOffset() method only gives the local time zone offset from UTC time and not the actual time zone.
The value of returned offset varies according to the Daylight Saving Time (DST) rules. We should not try to find the timezone using the offset because the calculation is not straightforward and may give incorrect results.
We should just use the above offset to find the local date and time from the server response containing UTC timestamps.
3.2. Intl.DateTimeFormat
If you really with to get the timezone information then use the Intl.DateTimeFormat object is available in all modern browsers.
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
console.log(timezone); // Asia/Kolkata
4. Conclusion
In this tutorial, we learned different options to show the date and time to the users according to their timezone and offset rules. Though Java supports numerous ways to convert and format the timestamps from one timezone to another, there is no easy way to get the timezone of the user from an HTTP request.
For this reason, sending UTC timestamp to the client is recommended approach where clients are free to choose the display format of the information as well.
Happy Learning !!
Comments