0

I am creating a countdown script, there is a PHP admin interface where a user can enter the date/time to countdown to, the admin will input the date/time in their local timezone and this gets passed into the script.

For users who visit the website in a different timezone I want a countdown to the date/time based on the admin's timezone not the users.

e.g.

  • Admin enters a date/time of 2023-06-01 13:00:00 and is in London
  • Website visitor from London on 2023-06-01 12:00:00 will see an hour countdown, website visitor from San Fransisco will see the same hour countdown

My code so far with comments for further explanation:

<div id="countdown"></div>
<script>
  function countdown() {

    var countdown = document.getElementById('countdown');
    var countdownDate = new Date('2023-06-28 10:00:00').getTime(); // The date and time here is being populated by a PHP echo, the date and time getting echoed is input via an admin interface and would be entered by the admin in their local timezone

    // The issue is that if a user of the website is in a different timezone to what the dates/times was entered in then the countdown will be higher/lower due to it being based on the users timezone. I just want the countdown to be to the date/time based on the timezone they were entered in. I could add something into the admin interface to enter a timezone string the dates entered are based on, then pass that to the JS to manipulate the dates? Or maybe there is another solution?

    var x = setInterval(function() {

      var now = new Date().getTime();
      var distance = countdownDate - now;

      if (distance < 0) {

        clearInterval(x);
        countdown.remove();

      } else {

        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        var countdownText = '';
        countdownText += days + ' days ';
        countdownText += hours + ' hours ';
        countdownText += minutes + ' mins ';
        countdownText += seconds + ' secs';
        countdown.innerHTML = countdownText;

      }

    }, 1000);

  }

  countdown();
</script>
bigdaveygeorge
  • 947
  • 2
  • 12
  • 32
  • Why send a date string to the front end without UTC time offset information? Wouldn't it be more useful to convert the admin entered date to a Unix time stamp before sending it to the front end? Front end code couls then report the countdown end in any time zone it wants, or just report the time remaining in hours/minutes/seconds, couldn't it? As it is, PHP is sending a date string parsed as local time in the client browser. – traktor Jun 21 '23 at 12:51
  • Maybe, the OP did not correctly explain the issue but as already was pointed to, the first flaw does already start in case it is true that an administrated date is not saved in an UTC format like e.g. `'Wed, 21 Jun 2023 13:48:15 GMT'` or `'Wed Jun 21 2023 15:45:09 GMT+0200'` where one could draw the time offset from. – Peter Seliger Jun 21 '23 at 13:49
  • @PeterSeliger The 2023-06-28 and 10:00:00 in the JS are PHP variables I can echo out there, I have tried to put a T inbetween and a Z on the end which appears to work, the only issue I am seeing now is that the now JS variable doesn't return the correct timestamp if the user is in a different timezone e.g. I set DevTools to mimic Pago Pago, and new Date() gives me the correct date for that timezone, but new Date().getTime() gives me a +1 time instead...? – bigdaveygeorge Jun 21 '23 at 13:54
  • @bigdaveygeorge ... In case the stored data already has lost the time zone offset information, but one still does know the location it was set, one could restore an UTC conform data object ... see ... [_"Create a date object in a specific time zone and convert it to UTC in JavaScript"_](https://stackoverflow.com/a/72155524/2627243) – Peter Seliger Jun 21 '23 at 13:58

0 Answers0