Javascript timer is 5 hours behind from php mysql

Question

I am working on a project where users can post/apply to jobs. if a user post a job with 2 days delivery time. I'm adding 2 days in the current time when inserting into database. then I am showing a countdown to user that shows how many days, hours, minutes, seconds are left both with PHP and Javascript. but the Javascript is 5 hours behind from the PHP. I have asked question about this and the users told me: It looks like a timezone difference issue. and I have to store and manipulate dates in UTC.

For PHP to use UTC I did: date_default_timezone_set('UTC');

For Mysql: UTC_TIMESTAMP() + INTERVAL " . $job['delivery_time'] . "

For Javascript: var endDate = new Date("<?php echo $job['job_expiration']; ?>");

But still the timer is 5 hours behind from PHP, Mysql.

"INSERT INTO jobs(job_expiration) VALUES(UTC_TIMESTAMP() + INTERVAL " . $job['delivery_time'] . ")"; like so.

I'm using UTC_TIMESTAMP and NOW() so I can select the jobs where time is less than four hours without selecting all jobs.

How can I solve this?

<?php

$timestamp = strtotime($time['expiration']) - time();

function convert_timestamp_to_date($timestamp)
{
  $date1 = new DateTime("@0");
  $date2 = new DateTime("@$timestamp");
  if ($date1->diff($date2)->d < 1) {
    return $date1->diff($date2)->format('%h Hours');
  } else {
    return $date1->diff($date2)->format('%a Days');
  }
}

Here is the Javascript code:

// $job['job_expiration'] = 2020-05-17 13:30:24

function countdownTimer() {
    // original code
  //const difference = +new Date("<?php echo $job['job_expiration']; ?>") - +new Date();
    // modified for stackoverflow
    const difference = +new Date("2020-05-17 13:30:24") - +new Date();
    let remaining = "Time's up!";

    if (difference > 0) {
        const parts = {
            days: Math.floor(difference / (1000 * 60 * 60 * 24)),
            hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
            minutes: Math.floor((difference / 1000 / 60) % 60),
            seconds: Math.floor((difference / 1000) % 60)
        };

        remaining = Object.keys(parts)
            .map(part => {
                if (!parts[part]) return;
                return `${parts[part]} ${part}`;
            })
            .join(" ");
    }

    document.getElementById("countdown").innerHTML = remaining;
}

countdownTimer();
setInterval(countdownTimer, 1000);

<div id="countdown"></div>

without your javascript code it's impossile to say what you are doing wrong ... are you in in UTC+5 or UTC-5 timezone? — Jaromanda X, May 17 '20 at 05:55
I'm not a javascript person, but I would suggest you evaluate the value of `""`. Perhaps the creation of "endDate" is either using or ignoring the UTC encoding of that date value. Just a thought. — Barns, May 17 '20 at 06:03
@JaromandaX I have updated the question and for UTC+5 or UTC-5 timezone for which language you are asking? — onlit, May 17 '20 at 06:09
Did you try doing all javascript time calculations with moment.js instead of Date ? — DNT, May 17 '20 at 06:20
@LachiWeb Had similar issues with server-side and JS time calculations, and ended up doing this: `var ts = moment.utc(data, 'DD/MM/YYYY').local().unix(); var now = moment().unix(); if (ts > now) { ... } `. Server sends mysql formatted TIMESTAMP values to JS in `data` in my case. Hope it gives you an idea. — DNT, May 17 '20 at 06:31
*for UTC+5 or UTC-5 timezone for which language you are asking* - english — Jaromanda X, May 17 '20 at 07:11
`new Date("2020-05-17 13:30:24")` will return an invalid date in Safari. Where parsed to a valid Date, it will be treated as local, not UTC. See [*Why does Date.parse give incorrect results?*](https://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results) Instead of passing a date and time string, pass a time value (aka "UNIX timestamp" like 1589722224000) that is more easily and reliably converted to a date. — RobG, May 18 '20 at 08:43

Javascript timer is 5 hours behind from php mysql

0 Answers0