JavaScript Dates Off by 1 Day? Fear Not, Here's the Ultimate Fix!

Niraj Dhungana

4 Min Read

Published on: 17 Nov 2023

Share:

I've been in the coding business for quite a while, but I've never delved fully into the JavaScript Date object – specifically, I haven't dealt much with dates sent from the frontend and processed on the Node.js server.

Why am I sharing all this?

Well, recently I was working on an app that required handling check-in and check-out dates. However, when I sent those dates from my frontend (React App) to my server (Node.js), I noticed something strange – my dates seemed to be shifting to previous dates.

For instance, if I sent the check-in as November 1, 2023, and check out as November 5, 2023, what I received on my backend server was

{ checkIn: “31-Oct-2023”, checkOut: “04-Nov-2023” }

I even tried reaching out to ChatGPT, but unfortunately, I couldn't find a solution.

Why is your JavaScript date off by 1 day?

The tale behind this quirk is quite intricate, and there's an in-depth post online that can take you through the details. If you're curious about the 'why,' I recommend giving it a read. However, if you're here for a quick fix, I've got you covered.

In a nutshell, the reason behind your JavaScript date misalignment boils down to the myriad of timezones we have worldwide – UTC, EST, GMT, and even variations like UTC+05:30, UTC+06:30, and so forth.

Here's the crux of the matter: browsers provide the time or date based on the user's current location, while our server endeavors to convert it to the universal date standard. This dichotomy results in some of us experiencing a frustrating 1-day discrepancy from the intended date.

How did I fix it?

Resolving this issue involves tapping into the power of a third-party date management libraries like moment or luxon. In my case, I opted for Luxon, a robust library (fun fact: it's created by the same mind behind Moment.js).

On the Frontend:

When sending dates from your frontend app, you have a couple of options. You can employ the default date formatting technique, such as toISOString. However, if you go this route, remember to split the date by 'T' and choose the first part. Here's a quick example:

const date = new Date().toISOString();
// 2023-11-17T03:11:35.460Z

const startDate = date.split("T")[0]
// ["2023-11-17", "03:11:35.460Z"][0] = "2023-11-17"

Alternatively, you can use the format function from date-fns to achieve the desired format. Which is what I am doing.

import { format } from "date-fns";
import axios from "axios";

const confirmBooking = async (date) => {
  const checkIn = format(date.startDate, "dd MMM yyyy");
  const checkOut = format(date.endDate, "dd MMM yyyy");

  // send your dates to the server
  await axios.post("/confirm-booking", { checkIn, checkOut })
}

In the example above, I'm showcasing a simple code snippet to illustrate date confirmation. Imagine you're trying to confirm a booking for a specific date range.

Assuming the confirmBooking function delivers a booking start and end date – a fundamental feature of any calendar component, we are also utilizing the format method from date-fns. And uisng axios to send api request.

Now, let's explore how we can handle this on our backend server using the Luxon DateTime object.

On the Server:

Now because we are sending dates as strings we can simply use the fromFormat method from DateTime and pass the format of our date. You can see the example below.

app.post("/confirm-booking", (req, res) => {
  const {checkIn, checkOut} = req.body;
  
  const checkInDate = DateTime.fromFormat(checkIn, "dd LLL yyyy");
  const checkOutDate = DateTime.fromFormat(checkOut, "dd LLL yyyy");
  ...
})

This is how you can secure the precise date you desire without losing any details. Additionally, if you're storing dates in a database, as I do with MongoDB, here's a handy tip: convert them to UTC, as demonstrated below.

const checkInUtc = DateTime.utc(
    checkInDate.year,
    checkInDate.month,
    checkInDate.day
  ).toUTC();
const checkOutUtc = DateTime.utc(
    checkOutDate.year,
    checkOutDate.month,
    checkOutDate.day
  ).toUTC();

In wrapping up, I hope this post sheds light on the intricacies of managing JavaScript dates and proves to be a helpful guide in fixing the perplexing 1-day off issue. If you found this valuable, I'd love to hear from you. Feel free to subscribe for more content like this, and if you enjoy video formats, don't forget to subscribe to my YouTube channel for regular updates. Happy coding!