2

i have a time counter in my web pages with below JavaScript code:

function setTimeCounters() {
    $(".time-counter").each(function (index, elem) {

        let exp = new Date($(this).attr('data-time'));

        var x = setInterval(function() {

            let now = (new Date()).getTime();
            let ex = (new Date(exp)).getTime();

            let distance = ex - now;


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

            $(elem).find(".time").html(`${showNumber(days)}:${showNumber(hours)}:${showNumber(minutes)}:${showNumber(seconds)}`);

            if ((hours+minutes+seconds) <= 0) {
                clearInterval(x);
                $(elem).html("timeout!");
            }
        }, 1000);

    });
}

function showNumber (num) {return ("0" + num).slice(-2);}

setTimeCounters();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="time-counter"
  data-time="2020-09-25 05:20:06">
  <span class="time"></span>
  <span><i class="fa fa-clock"></i></span>
</div>

my problem is with safari browser on iphone ios and maybe mac os(work fine in chrome , ...) show time like this : aN:aN:aN:aN:aN

Behzad
  • 47
  • 1
  • 8
  • What is `showNumber` function? According to the `aN:aN:aN:aN:aN` result, it seems that there are some `NaN`s on the way.. – Jan Stránský Sep 21 '20 at 13:55
  • I edited your snippet to make it runnable, but it still needs your implementation of `showNumber`. I added a placeholder for now. @KBASE, please edit. – Wyck Sep 21 '20 at 14:02
  • @Wyck sorry about that, edited – Behzad Sep 21 '20 at 15:30
  • i added time, now run it and it will work, we have problem with iphone safari – Behzad Sep 21 '20 at 15:33
  • Is that date format legal / supported? (I don't think so) See https://stackoverflow.com/a/4310986/1563833 I think you'll need to use parseExact to use that format. – Wyck Sep 21 '20 at 15:56
  • give me an legal date to replace in code, to test. @Wyck – Behzad Sep 21 '20 at 17:42
  • `2020-09-21T17:44:46.658Z` Or generate your own: e.g.: `new Date().toISOString()` – Wyck Sep 21 '20 at 17:45
  • @Wyck thank you, thats work fine , but i generate date in php and place in html, is there a way i change date format in javascript? – Behzad Sep 21 '20 at 18:38
  • Yes. Use date.js's `parseExact` instead of `new Date(exp)`. It says to do so in [the answer I linked](https://stackoverflow.com/questions/4310953/invalid-date-in-safari/4310986#4310986). – Wyck Sep 21 '20 at 18:43
  • @Wyck is there any javascript built-in function Or JQuery function to parse my date ? – Behzad Sep 21 '20 at 18:57
  • Have you considered [writing an ISO8601 standard date format in php](https://stackoverflow.com/a/5322309/1563833)? – Wyck Sep 21 '20 at 18:59
  • @Wyck that works, and problem solved, how can i select your answer as approved?! – Behzad Sep 21 '20 at 19:20
  • I can write one. Did you go with date.js or did you change your php? – Wyck Sep 21 '20 at 23:50
  • @Wyck i change php, because of some problem with rebulid my js! please right answer – Behzad Sep 22 '20 at 08:31

1 Answers1

-1

check browser support for let. I strongly reccomend to use var instead of let reference url: https://caniuse.com/let

mohamad yazdanpanah
  • 39
  • 4