On Ios the counter remainingTime becames NaN

[simoneagostinelli]

Hi, i'm using the counter on my webapp, when the counter is rendered on a mobile ios device the counter callback with remainingTime becames NaN as you can see on my screen.

here is my code

the parseTime function is this:

const parseTime = (props) => {
    console.log('props', props);
    const hours = minTwoDigits(Math.floor(props.remainingTime / 3600));
    const minutes = minTwoDigits(Math.floor((props.remainingTime % 3600) / 60));
    const seconds = minTwoDigits(props.remainingTime % 60);
}

and the browser logs is below

I'm able to reproduce the issue also with chrome inspector as an ios device

[vydimitrov]

Hey @simoneagostinelli, is it possible because the duration prop is set to null. It is required prop by the way.

[simoneagostinelli]

Hi @vydimitrov that is not my case, because the duration is setted with the totalTime and as you can see in the logs totalTime is valorized, the case in which the duration is null was different, in that case i'm not showing the numbers so I have no problems. plus, if what you said was true, the timer will be NaN always, not only with an ios device

[vydimitrov]

I see, it would be nice to get it reproduce somewhere so I can take a look on what goes wrong there.

[simoneagostinelli]

Sorry for the late response, during this WE i will try to replicate on a codesandbox and i will provide it to you

[vydimitrov]

Closing due to inactivity.

[daygarcia]

I'm having the same issue here. On IOS, always enter the else (for example 5699). And just in case, if I remove the or statement, it becomes NaN

[daygarcia]

After some tests, i discovered the problem.

IOS, for some reason, dont accept the date format that I was using: "03/08/2024 : 23:59:00" mm/dd/yyyy : hh:mm:ss

All I had to do was convert this date to a valid ISO string, just like that: "2024-03-08T23:59:00"

And everything works fine now.