Countdown JS not working on safari

Question

I’m developing a website with a countdown.

The code works well on the desktop and the timer starts counting perfectly in Firefox and Chrome, but in mobile, specifically in iphone, Safari browser, the number shows Nan: Nan: Nan

Someone’s had this problem before?

I’m using the Countdown JS: http://countdownjs.org/

Follow the code below:

Directive:

.directive('tempoPercorrido', function($interval){
            return {
                link: function(scope, element, attrs){
                    var timeNow = new Date(attrs.tempoPercorrido);
                    var units = countdown.DAYS | countdown.HOURS | countdown.MINUTES | countdown.SECONDS;
                    var timespan = countdown(timeNow, null, units, 0, 0);                    
                    function updateTme(){
                        var timespan = countdown(timeNow, null, units, 0, 0);
                        var dias = timespan.days <= 9 ? '0' + timespan.days.toString() : timespan.days.toString();
                        var horas = timespan.hours <= 9 ? '0' + timespan.hours.toString() : timespan.hours.toString();
                        var minutos = timespan.minutes <= 9 ? '0' + timespan.minutes.toString() : timespan.minutes.toString();
                        var segundos = timespan.seconds <= 9 ? '0' + timespan.seconds.toString() : timespan.seconds.toString();

                        var contador = 
                               '<div class="dias circulo">'+ dias + '</div>'+
                               '<div class="horas circulo">'+ horas + '</div>'+
                               '<div class="minutos circulo">'+ minutos + '</div>'+
                               '<div class="segundos circulo">'+ segundos + '</div>';
                        //console.log(timespan);
                        $(element).html(contador);       
                    }

                    updateTme();

                    $interval(function(){
                        updateTme();
                    }, 1000);
                }
            }
        })

Html:

<div class="horario_banner" tempo-percorrido="2017-09-15 10:00:00"></div>

Answer 1

You do not need to use an external angular lib if you choose to use an external lib I advise you to use the Moment.js

//Variável limit caso o seu contador tenha limite
var limitsegundos = 10
function meuContador(){
        if (limitsegundos <= 0) {
            stop();
            vm.title = "Alerta contador terminou";
            limitsegundos = null;
            //Aqui você pode chamar um evento se quiser


        } else {

            limitsegundos--;
            /*Aqui você pode subtrair a sua variável em 1 segundo em 
            javaScript ou  usando a lib moment.js exemplo:
             dateTime.subtract(1, 'seconds').format('m:ss'); */


            mytimeout = $timeout(meuContador(), 1000);

        } 
var mytimeout = $timeout(meuContador(), 1000);

//Function responsável por parar o contador caso seja necessário:
function stop() {
        $timeout.cancel(mytimeout);
    }

In the View I advise you to use the filter to display the date according to the documentation of date of Angularjs

 <div class="horario_banner" tempo-percorrido="{{seuTempo | date:'yyyy-MM-dd HH:mm:ss' }}"></div>