1

Criei um modulo em Angular JS que pega a data atual do relógio e começa a contar até o final, porém preciso poder definir uma data inicial para começar a contagem que não seja baseada no relógio, como faço isso?

    angular.module('iCountdown', [])
        .directive("iCountdown", function () {

            return {
                restrict: "EAC",
                scope: {
                    setDate: "@",
                    expireMessage: "@",
                    formatView: "@"
                },
                replace: true,
                template: "<div><div></div></div>",
                link: function (scope, element) {

                    scope.insertDate = function() {
                        scope.setMessageExpired(scope.expireMessage);
                        scope.setDateFinal(scope.setDate);
                        scope.start();
                    };

                    scope.$watch('setDate', function() {
                        scope.insertDate();
                    }, true);

                    var end = new Date();
                    var _second = 1000;
                    var _minute = _second * 60;
                    var _hour = _minute * 60;
                    var _day = _hour * 24;

                    var params = {
                        second:_second,
                        minute:_minute,
                        hour: _hour,
                        day: _day,
                        interval: null,
                        messageFinal: 'expired!',
                        format:'Y-m-d H:i:s',
                        dateEnd: null
                    };

                    scope.setMessageExpired = function(message) {
                        params.messageFinal = message;
                    };

                    scope.setId = function(id) {
                        params.id = id;
                        scope.viewElement.setAttribute("id", id);
                    };

                    scope.setDateFinal = function(dateVal) {
                        params.dateEnd = dateVal;
                    };

                    var createDateFinal = function(strDate) {

                        var reggie = /(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/;
                        var dateArray = reggie.exec(strDate);
                        return new Date(
                            (+dateArray[1]),
                            (+dateArray[2])-1, // Careful, month starts at 0!
                            (+dateArray[3]),
                            (+dateArray[4]),
                            (+dateArray[5]),
                            (+dateArray[6])
                        );

                    };


                    scope.remaining = function() {
                        var now = new Date();

                        end = createDateFinal(params.dateEnd);

                        var distance = end - now;

                        if (distance < 0) {
                            clearInterval(params.interval);
                            //scope.viewElement.view = params.messageFinal;
                            element[0].innerHTML = params.messageFinal;
                            return;
                        }
                        var days = Math.floor(distance / params.day);
                        var hours = Math.floor((distance % params.day) / 

params.hour);
                    var minutes = Math.floor((distance % params.hour) / params.minute);
                    var seconds = Math.floor((distance % params.minute) / params.second);
                    var elementsTime = [];
                    elementsTime[0] =((days < 10) ? '0' : '') + days;
                    elementsTime[1] =((hours < 10) ? '0' : '') + hours;
                    elementsTime[2] =((minutes < 10) ? '0' : '') + minutes;
                    elementsTime[3] =((seconds < 10) ? '0' : '') + seconds;
                    element[0].innerHTML =  scope.setFormatViewTime(elementsTime);

                };

                scope.setFormatViewTime = function(elementsTime) {
                    return scope.formatView
                        .replace(/%d/gi, elementsTime[0])
                        .replace(/%h/gi, elementsTime[1])
                        .replace(/%i/gi, elementsTime[2])
                        .replace(/%s/gi, elementsTime[3]);
                };

                scope.setFormatDate = function(format) {
                    params.format = format;
                };

                scope.start = function () {
                    if (!(end instanceof Date) || isNaN(end.valueOf()) ) {
                        console.log('A data final não foi definida, adicione uma data conforme o exemplo: yyyy-mm-dd hh:mm:ss!');
                        return false;
                    }
                    params.interval = setInterval(this.remaining, params.second);
                };

            }

        };
    });

E aqui a diretiva atual:

<i-countdown set-date="2015-08-21 10:10:10" format-view="%d dias %h hs %i min %s sg" expire-message="Fim do período"></i-countdown>

A ideia é mudar fazendo uma diretiva desta maneira:

  <i-countdown set-date-start="2015-08-28 10:10:00" set-date-end="2015-09-28 10:10:10" format-view="%d dias %h hs %i min %s sg" expire-message="Fim do período"></i-countdown>

Aqui tem um exemplo funcionando: http://jsfiddle.net/ivanferrer/b60djmho/

E essa foi minha tentativa frustrada: http://jsfiddle.net/ivanferrer/1cyxoytv/16/

1 Resposta 1

1

O que me pareceu foi que você sempre pegava a mesma data inicial para a contagem, por isso o resultado do contador não mudava. Então criei o parâmetro currDate, onde é guardada a data atual do contador:

if (!params.currDate)
{
    params.currDate = createElementDateInitial(params.dateStart);
}

_start = params.currDate;
_end = createElementDateFinal(params.dateEnd);

params.currDate.setSeconds(params.currDate.getSeconds() + 1);

No código acima é verificado se params.currDate é nulo, no caso da primeira iteração. Se for ele recebe a data inicial. Depois disso, o currDate só vai trabalhar com o objeto Date da data atual, somando um segundo à cada iteração, para se aproximar da data final.

Fiddle E aqui a finalização do contador.

4

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .