JavaScript Date time different once deployed to Heroku

Question

Locally, everything is accurate by the minute. Once deployed to Heroku, the difference between the times are off by about 6 hours. I am not looking to convert Heroku time zone (would like it to remain UTC). I've tried everything from getTimezoneOffset() conversions to different date formats and I still end up with the same result. How can I have these 2 date times match each other and not be offset by hours when deployed? Why are they different, when formatted the exact same way?

// Used to calculate current date time

const currentDate = new Date();
// ^ Production - (2021-10-12T19:12:41.081Z)
const time = `${currentDate.getHours()}:${currentDate.getMinutes()}`;
const fullDate = `${currentDate.getMonth()}/${currentDate.getDate()}/${currentDate.getFullYear()}`;
const currentDateFormatted = new Date(`${fullDate} ${time}`);
// ^ Production - (2021-10-12T19:12:00.000Z)

const currentParsedDateToUTC = Date.parse(currentDateFormatted.toUTCString());

// Used to calculate an event date time

const eventDate = new Date(`${event.date} ${event.endTime}`); // same exact format as above
// ^ Production - (2021-10-12T13:12:00.000Z)
const eventParsedDateToUTC = Date.parse(eventDate.toUTCString());

const isExpired = (currentParsedDateToUTC > eventParsedDateToUTC); // works locally, but not in production

In this example, the event date and start time is identical to the current date time. How can I prevent them from being vastly different?

Answer 1

That is because the Heroku server is in a different timezone than yours, you can handle it by converting the time format from your frontend, I recommend you use moment.js for example in your frontend you can convert like this:

npm install moment --save

And then you can create a function just to change the format to display:

const formatDatetime = (
  datetime = "N/A",
  format = 'LLL' // here is your format
) => {
  return moment(datetime).isValid()
    ? moment(datetime).format(format)
    : datetime;
};

Answer 2

So -- Heroku is returning the correct UTC local time, as of this writing it is 2021-10-12T19:36:00.000Z.

You're asking Heroku to interpret 2012-10-12 13:12 as a date, but you're not specifying what timezone it should use, so it defaults to its own local time of UTC.

Everything here is working as expected.

What you I think are implicitly asking is that you want it to interpret 13:12 as being in your local time. However, Heroku has no way of knowing what your local time is, so you'll need to track the timezone of events in your database.

The only reason this is working locally is because your local server happens to be in the same timezone as you -- if I were to connect to your local server from my timezone, I'd experience the same problem.

Answer 3

The first four lines of code seem to be an attempt to create a Date and set the seconds and milliseconds to zero. That can be done as:

let d = new Date();
d.setSeconds(0,0);

which will set the seconds and milliseconds to zero.

I don't know what you think the following does:

const currentParsedDateToUTC = Date.parse(currentDateFormatted.toUTCString());

but an identical result is given by:

d.getTime();

which is actually the value returned in the previous call to setSeconds. So the first 5 lines of code reduce to:

let currentParsedDateToUTC = new Date().setSeconds(0,0);

Then in:

const eventDate = new Date(`${event.date} ${event.endTime}`);

A timestamp in the format d/m/y H:m is parsed using the built–in parser, which is a bad idea, see Why does Date.parse give incorrect results?. You can use a library instead or just write a 2 line function to do the job.

Then again there is:

const eventParsedDateToUTC = Date.parse(eventDate.toUTCString());

which is simpley:

const eventParsedDateToUTC = eventDate.getTime();

Finally there is:

const isExpired = (currentParsedDateToUTC > eventParsedDateToUTC);

comparison operators will coerce Dates to number for you, so you can leave the values as Dates.

A function to do the job is:

// eventDate is UTC timestamp in m/d/y H:m format
function isExpired(eventDate) {
  // Parse eventDate as UTC
  let [M,D,Y,H,m] = eventDate.split(/\W/);
  let eventD = new Date(Date.UTC(Y, M-1, D, H, m));
  // return true if has passed (minute precision)
  return eventD < new Date().setSeconds(0,0);
}

// Event dates (UTC)
['10/12/2021 12:00', // 12 Oct 2021 12:00
 '10/13/2021 12:00', // 13 Oct 2021 12:00
 '10/13/2022 12:00', // 13 Oct 2022 12:00
 ].forEach(d => 
   console.log(d + ' has' + (isExpired(d)? '':' not') + ' Expired')   
);

Where you could use the value returned by Date.UTC(Y, M-1, D, H, m) without conversion to Date so the last two lines could be:

  return Date.UTC(Y, M-1, D, H, m) < new Date().setSeconds(0,0);

but it's a bit more semantic (if unnecessary) to use a Date. :-)