Home > Mobile >  UTC time is incorrectly displayed as local time
UTC time is incorrectly displayed as local time

Time:06-09

I've found that some dates (at the moment I only found this error with some before-epoch dates) add an hour of difference from UTC.

Local time is GMT-3

First time I see it was in Javascript

> new Date("1969-07-26T03:00:00 00:00")
< Fri Jul 25 1969 23:00:00 GMT-0400 (-03) // why is it -0400?

> new Date("1963-07-26T03:00:00 00:00")
< Fri Jul 26 1963 00:00:00 GMT-0300 (-02)

Then I tried in Ruby and the same happened

irb(main):288:0> Time.parse("1969-07-26T03:00:00 00:00").localtime
=> 1969-07-25 23:00:00 -0400

But (maybe I did it wrong) doesn't happen in Python

In [12]: utc = datetime.fromisoformat("1969-07-26T03:00:00 00:00")

In [13]: utc.replace(tzinfo=tz.tzutc())
Out[13]: datetime.datetime(1969, 7, 26, 3, 0, tzinfo=tzutc())

In [14]: utc.astimezone(tz.tzlocal())
Out[14]: datetime.datetime(1969, 7, 26, 0, 0, tzinfo=tzlocal())

I haven't been able to find information about it. Anything to read about and how to handle those cases? For example 1963-07-26T03:00:00 00:00 works as expected.

Cheers!

CodePudding user response:

Adding 00:00 to the end of your date string is creating a UTC offset. Since you're specifying zero hours, zero minutes, and zero seconds, it's creating a zero-offset from GMT, or in other-words, setting your timezone to exactly GMT.

For example, I'm in a GMT -5 timezone (US Central). When I create a new JS date using today's date at 6am, I get a subtraction of 5 hours (because GMT -5 is my timezone) :

> new Date("2022-06-08T06:00:00 00:00")
// Wed Jun 08 2022 01:00:00 GMT-0500 (Central Daylight Time)

However, if I omit the offset, then it works as expected, and I get the date in my local timezone.

> new Date("2022-06-08T06:00:00")
// Wed Jun 08 2022 06:00:00 GMT-0500 (Central Daylight Time)

I can also run your code examples and get the expected result.

> new Date("1969-07-26T03:00:00")
// Sat Jul 26 1969 03:00:00 GMT-0500 (Central Daylight Time)

See the section Date Time String Format in the ECMAScript specification for more details.

CodePudding user response:

When we log JavaScript dates to the console, they are normally displayed in your local time, similar to when we call Date.toString().

We have to separate the display of the date from the point in time the date represents.

From MDN:

JavaScript Date objects represent a single moment in time in a platform-independent format. Date objects contain a Number that represents milliseconds since 1 January 1970 UTC.

We can access this value using Date.getTime() if we wish to.

When we display the date in the console we can select a timezone to display the date in. As mentioned above, this is implicitly local time, but we can use Date.toUTCString() to display the date in UTC.

We can also use Date.toISOString() to display the UTC date in ISO-8601 format.

If we wish to show the date in another timezone we can use Date.toLocaleString().

For example:

const timestamp = "1969-07-26T03:00:00 00:00";
const dt = new Date(timestamp);

// Display timestamp
console.log('Timestamp:      ', timestamp);

// Display in UTC timezone (toISOString), this displays milliseconds and 'Z' offset 
console.log('UTC (ISO):      ', dt.toISOString());

// Display in UTC timezone
console.log('UTC:            ', dt.toUTCString());

// Display in our local time
console.log('Local:          ', dt.toString());
.as-console-wrapper { max-height: 100% !important; }

We can also use the getUTCxxx() functions to get the year, month, etc. of the date object, for example, getUTCFullYear(), getUTCMonth(), getUTCDate() etc.

const timestamp = "1969-07-26T03:00:00 00:00";
const dt = new Date(timestamp);

// Display timestamp
console.log('Timestamp:      ', timestamp);

const dateComponents = { 
  year: dt.getUTCFullYear(),
  month: dt.getUTCMonth()   1 /* getUTCMonth() returns the month index */, 
  day: dt.getUTCDate(),
  hour: dt.getUTCHours(),
  minute: dt.getUTCMinutes(),
  second: dt.getUTCSeconds()
};

console.log('UTC date components:', dateComponents);
.as-console-wrapper { max-height: 100% !important; }

  • Related