js string to datetime add 2 hours

Question

I'm working with a PHP Api witch gives me this json:

{
"title": "hemen",
"category": "time",
"start": "2021-09-27T09:22:00+00:00",
"end": "2021-09-27T13:22:00+00:00",
"isAllDay": false,
"calendar": [{"id": 1}],
"body": null
}

The problem is that in my frontend (Vue) I'm convering the start and end dates to datetime but it adds 2 hours and I don't know why or the best option to fix it.

axios.get('/api/schedules.json').then(function (response) {
    let dataOri = response.data;
    
    // convert
    dataOri.forEach(element => {
        element.start = moment(element.start, "YYYY-MM-DDTHH:mm:ssZ").format("YYYY-MM-DD HH:mm:ss");
        console.log(element.start); // prints '2021-09-27 11:22:00' instead of '2021-09-27 09:22:00'

        element.end = moment(element.end, "YYYY-MM-DDTHH:mm:ssZ").format("YYYY-MM-DD HH:mm:ss");
        console.log(element.end); // prints '2021-09-27 15:22:00' instead of '2021-09-27 13:22:00'
    });
    self.filterSchedules = dataOri;
});

It is most likely because of timezones. If you look at the format YYYY-MM-DDTHH:mm:ssZ, you are adding there "Z" in the end. That specifies the time is in UTC, like mentioned here, and you are formatting it into local (without the "Z"). — Tatranskymedved
– Tatranskymedved, Commented Sep 27, 2021 at 11:27
@Tatranskymedved—the initial times are UTC. The "Z" token in the parse format means "offset as +HH:mm", it doesn't mean UTC (see the moment.js display section). The offset is +00:00 which is effectively UTC. — RobG
– RobG, Commented Sep 27, 2021 at 14:34
Ah, sorry, you are right, I said it wrongly. Can't edit comment, will update answer to reflect this. — Tatranskymedved
– Tatranskymedved, Commented Sep 27, 2021 at 14:40

Tatranskymedved · Accepted Answer · 2021-09-27 14:44:40Z

1

You are parsing the time with information that "original time is within specified timezone" (+00:00) and then printing it in local time.

There are 2 approaches how to handle the situation, you can either:

Ignore these timezones completely (bad approach)
Include/parse this timezone information and output it in original UTC time (good approach)

var dateAsStr = "2021-09-27T09:22:00+00:00";

var resultWrong = moment(dateAsStr, "YYYY-MM-DDTHH:mm:ssZ").format("YYYY-MM-DD HH:mm:ss");
var resultBadApproach = moment(dateAsStr, "YYYY-MM-DDTHH:mm:ss").format("YYYY-MM-DD HH:mm:ss");
var resultGoodAproach = moment(dateAsStr, "YYYY-MM-DDTHH:mm:ssZ").utc().format("YYYY-MM-DD HH:mm:ss");

console.log("wrong: " + resultWrong);
console.log("correct (bad approach): " + resultBadApproach);
console.log("correct (good approach): " + resultGoodAproach);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

edited Sep 27, 2021 at 14:44

answered Sep 27, 2021 at 11:33

Tatranskymedved

4,4413 gold badges29 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kioko Kiaza Over a year ago

woooooooo mind blowing! the problem was that I was adding the Z.... grgrggrggrgr

Tatranskymedved Over a year ago

But it is really useful to have it there, if you know that source date is in UTC. If some people open your webpage from UK and from China, you can show them their local time correctly up to their zones. It depends on the usage.

RobG Over a year ago

Noooo!! "2021-09-27T09:22:00+00:00" is effectively UTC, it should be parsed with the offset! If the OP wants to see the same date and time, then format it as UTC too.

Tatranskymedved Over a year ago

@RobG Thanks for review! I've updated the answer, feel free to edit/suggest better description.

Collectives™ on Stack Overflow

js string to datetime add 2 hours

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related