Javascript Returning NAN NAN NAN on IOS

Question

I am using this function to convert UTC timestamp to Date according to the current user timezone

 let timeConversion = (new Date().getTimezoneOffset() * -1 / 60) * 60 * 60; function formatTime(time) { let d = new Date(((time + timeConversion) * 1000)); return (d.getUTCDate() < 10 ? '0' + d.getUTCDate() : d.getUTCDate()) + '/' + (d.getUTCMonth() + 1 < 10 ? '0' + (d.getUTCMonth() + 1) : (d.getUTCMonth() + 1)) + '/' + d.getUTCFullYear().toString().substr(2, 4) + ' ' + (d.getUTCHours() < 10 ? '0' + d.getUTCHours() : d.getUTCHours()) + ':' + (d.getUTCMinutes() < 10 ? '0' + d.getUTCMinutes() : d.getUTCMinutes()); } let allDates = document.getElementsByClassName("candidatedate"); Array.prototype.forEach.call(allDates, function(el) { el.innerHTML = formatTime(parseInt(el.innerHTML)); el.className = "candidatedate"; });

 <span class="candidatedate">1604263179</span><span class="candidatedate">1604263177</span><span class="candidatedate">1604263176</span>

The code works perfectly on every platform except for IOS when I try to see the page it shows NAN NAN NAN NAN and the issue is that i can't debug the code on ios safari(I don't have usb cable for my IPHONE). Can someone help me with that ? Thanks

Answer 1

I strongly recommend you to use moment JS to make this code readable using the format method.

Or write it at least more like that

function formatTime(time) {
   let d = new Date(((time + timeConversion) * 1000));
   return
      ('0' + d.getUTCDate()).slice(-2)
      + '/' +
      ('0' + (d.getUTCMonth() + 1) ).slice(-2)
      + '/' +
      d.getUTCFullYear().toString().substr(2, 4)
      + ' ' + 
      ('0' + d.getUTCHours()).slice(-2)
      + ':' +
      ('0' + d.getUTCMinutes()).slice(-2)
      ;
};

So you got NAN . My guess is a problem with time variable. It comes from el.innerHTML , a string converted with parseInt.

Could you try displaying it to verify the value? Just with this small modification?

Array.prototype.forEach.call(allDates, function(el) {
   const before = el.innerHTML;
   const after = formatTime(parseInt(el.innerHTML));
   el.innerHTML = `${before} // ${after}`;
   el.className = "candidatedate";
});

It everything is correct, you should maybe consider the fact that this code cannot run more than once... or it will fail with something like parseInt('12/10/20 04:22) .. So maybe adding a 'check no second run' could help.

Answer 2

The problem stems from iOS trying to be very clever — and recognizing that your time strings could possibly be phone numbers.

The length matches the standard US phone number so iOS wraps them as links, allowing the user to click and call. 1604263177 becomes <a href="tel:1604263177">1604263177</a> and so forth. I suspect Android and other phones might display similar behavior.

The easiest solution is to switch from innerHTML over to innexText .

Array.prototype.forEach.call(allDates, function(el) {
  const input = parseInt(el.innerText, 10);
  el.innerHTML = input ? formatTime(input) : "";
  el.className = "candidatedate";
});

Answer 3

 function formatTime(time){return(new Date(time- (new Date().getTimezoneOffset()*60000) ))} //now basically 1 hr is 60000 units of the unit 'time' so that's my logic //also new Date(randomTimeStamp) produces a new date off of that recorded timestamp let d=formatTime(new Date().getTime()) console.log(d.toDateString()+" "+d.toLocaleTimeString()) //im not gonna copy a number when i can make one on the dot for illustration ;] //also, d is what the actual value u want, i just logged something that seems like it

Answer 4

UPDATE:

The issue was that safari auto converted number to links.

I solved this by using :

<meta name="format-detection" content="telephone=no">