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](https://stackoverflow.com/questions/833102/wheres-the-datetime-z-format-specifier), and you are formatting it into local (without the "Z"). — Tatranskymedved, Sep 27 '21 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](https://momentjs.com/docs/#/displaying/)). The offset is +00:00 which is effectively UTC. — RobG, Sep 27 '21 at 14:34
Ah, sorry, you are right, I said it wrongly. Can't edit comment, will update answer to reflect this. — Tatranskymedved, Sep 27 '21 at 14:40

Tatranskymedved · Accepted Answer · 2021-09-27T14:44:40.183

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 '21 at 14:44

answered Sep 27 '21 at 11:33

Tatranskymedved

4,194
3
21
47

woooooooo mind blowing! the problem was that I was adding the Z.... grgrggrggrgr – Kioko Kiaza Sep 27 '21 at 11:39
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. – Tatranskymedved Sep 27 '21 at 11:48
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. – RobG Sep 27 '21 at 14:32
@RobG Thanks for review! I've updated the answer, feel free to edit/suggest better description. – Tatranskymedved Sep 27 '21 at 14:45

js string to datetime add 2 hours

1 Answers1