Question 238361 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – handle dates properly with different timezones in a React App

I have a react application that stores and retrieves datetimes, then disable the unavalaible dates and times.

When the dates are saved from a calendar into the Database, they are one hour late.

When I retrieve the dates from the database, they are 2 hours late.

Imagine I have chosen this dateTime from the calendar : 24 Aug 2023 at 21:30

In the database it is saved as : 2023-08-24 20:30:00.000

When I retrieve it I get : 2023-08-24T19:30:00.000Z

When I wrap it in a Date object I get: Date Thu Aug 24 2023 20:30:00 GMT+0100 (UTC+01:00).

console.log(res.data[0].dateTime) // 2023-08-24T19:30:00.000Z
console.log(new Date(res.data[0].dateTime)) //Date Thu Aug 24 2023 20:30:00 GMT+0100 (UTC+01:00)

When I display it using date-fns I get 20:30 instead of 21:30

<td className="border border-neutral-500 p-3">
        {format(new Date(res.data[0].dateTime), 'kk:mm')}
</td>

Note that when I deployed this app on LWS which has a different timezone, the dates are 2 hours late, and I cannot update the system timezone.

Please help me understand how can I handle these dates properly with different timezones in order to have the same date and times.

Tags:

2

Answers


  1. 0

    It seems like you’re encountering issues with timezones when storing and retrieving datetime values in your React application. Timezone handling can be tricky, but there are a few steps you can take to ensure consistent behavior across different timezones:

    1. Standardize Timezones: Make sure that all datetime values are consistently stored and retrieved in a specific timezone. The best practice is to store datetime values in UTC in your database and convert them to the desired timezone only when displaying them to users.

    2. Conversion to UTC: When saving datetime values to the database, ensure that they are converted to UTC before storage. This helps in avoiding ambiguity and makes it easier to handle datetime values across different timezones.

    3. Conversion for Display: When retrieving datetime values from the database, convert them to the user’s timezone for display. This ensures that users see the datetime values adjusted to their local time.

    Here’s how you can approach these steps in your React application:

    import { format, parseISO, utcToZonedTime } from 'date-fns-tz';

// When saving datetime to the database (assuming selectedDate is the chosen datetime)
const selectedDate = new Date(); // Replace with the chosen datetime
const selectedDateUTC = selectedDate.toISOString(); // Convert to UTC before storing

// When retrieving datetime from the database
const storedDateFromDB = "2023-08-24T19:30:00.000Z"; // Replace with the retrieved datetime
const userTimezone = 'Europe/London'; // Replace with the user's timezone

const storedDateUTC = parseISO(storedDateFromDB);
const displayedDate = utcToZonedTime(storedDateUTC, userTimezone);

// Display the datetime using date-fns
const formattedDate = format(displayedDate, 'kk:mm');

    By following this approach, you’re ensuring that datetime values are consistently handled and displayed across different timezones. Storing datetime values in UTC and converting them to the user’s timezone for display helps in maintaining accuracy and consistency.

    Remember to use a reliable library like date-fns-tz or luxon for handling timezones and datetime manipulation, as they provide better support for managing timezones and daylight saving time changes.

    Login or Signup to reply.
  2. 0

    You have:

    • database
    • application server
    • browser

    Database

    Your DB is set to use a specific timezone. I will assume that it’s UTC, because it’s a standard, but, if it’s not the case, then it makes sense to switch to UTC, but you are not obliged to do so. Remember, your clients are unlikely to directly access this data nor the users, so you would do well to choose the timezone which will be better for you from technical point of view and ensure that the data is humanly understandable (a.k.a. show the date according to the user’s timezone) on a different level.

    Application

    Your application server also has a timezone, which is not necessarily the same as the timezone of the database. You would do yourself a favor if you set your application’s timezone to be the very same as the database timezone. Of course, your application may have to generate reports, which are to be read by people, so you will need to convert the database/app date/time to the timezone of the audience of the report.

    Browser

    This part, like your reports that may be generated at the server are to be shown to humans, so you will need two functions to convert to app/db timezone and back:

    function toUTC(value) {
    return (new Date(value).toUTCString());
}

function fromUTC(value) {
    return (new Date(value));
}

function handle(value) {
    let context = document.getElementById("output").querySelectorAll("p");
    context[0].innerHTML = `UTC time: ${toUTC(value)}`;
    context[1].innerHTML = `Your time: ${fromUTC(toUTC(value))}`;
}
    <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime" oninput="handle(this.value);">
  <br>
  <div id="output">
      <p></p>
      <p></p>
  </div>

    where toUTC converts the value you have chosen at the input into a UTC string. This string is to be sent to the server. Once the server sends you a UTC string, you can convert it into your local date via fromUTC.

    If you use some other timezone than UTC at your server, then you will need to use toLocaleString, see https://www.tutorialspoint.com/how-to-convert-date-to-another-timezone-in-javascript

    This is an added complexity in comparison to the case when you would use UTC, so I would avoid it if possible, but it’s a solvable issue if using UTC at the server is not an option for some reason.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search