"HUG_2018 - Next Event" Module (does not work on iPhones)

[therobert]

url: https://northdallas.hubspotusergroups.com/

The timestamp seems to be formatted incorrectly in the javascript. So, it will not show up at all on iOS. I tried editing the javascript, but to no avail.

Any ideas?

Here is the code:

var eventEl = document.getElementById('event_timestamp'),
    dayEl = eventEl.getElementsByClassName('countdown__days')[0].getElementsByClassName('countdown__digit')[0],
    hourEl = eventEl.getElementsByClassName('countdown__hours')[0].getElementsByClassName('countdown__digit')[0],
    minuteEl = eventEl.getElementsByClassName('countdown__minutes')[0].getElementsByClassName('countdown__digit')[0],
    secondEl = eventEl.getElementsByClassName('countdown__seconds')[0].getElementsByClassName('countdown__digit')[0];

var countDownDate = new Date(eventEl.getAttribute('data-timestamp')).getTime();
// var countDownDate = countDownDate.replace(/-/g, '/');
// var countDownDate = new Date(eventEl.getAttribute("data-timestamp").replace(/-/g, "/")).getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  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);

  // Display the result in the element with id="demo"
  dayEl.innerHTML = days;
  hourEl.innerHTML = hours;
  minuteEl.innerHTML = minutes;
  secondEl.innerHTML = seconds;


  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    eventEl.innerHTML = "EXPIRED";
  }
}, 1000);

[therobert]

It'd be really helpful if modules like this worked out of the box or at least had dev comments in the code. @Connor_Barley

[therobert]

Thanks, it turns out, there was a huge delay in my pages updating upon publishing changes. Pages seem to update either really quick or painfully slow. All is well now.

[cbarley · Accepted solution]

Hey @eiserloh, The issue is a browser-specific one. Chrome allows for date formats of yyyy-mm-dd hh:mm:ss, but Safari does not. We'd need to replace those dashes with forward-slashes. In order to do this, we can replace the dashes with some JS. So instead of:

var countDownDate = new Date(eventEl.getAttribute('data-timestamp')).getTime();

we can use:

var countDownDate = new Date(eventEl.getAttribute("data-timestamp").replace(/-/g, "/")).getTime();

This should fix the issue you're seeing on Safari, as I've tested on my device and it looks good!