Display Localized Timestamp in User’s Timezone

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 !!

Sourcecode on Github

Comments

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

About Us

HowToDoInJava provides tutorials and how-to guides on Java and related technologies.

It also shares the best practices, algorithms & solutions and frequently asked interview questions.

Our Blogs

REST API Tutorial

Dark Mode

Dark Mode