How to set a start date in this countdown counter made in AngularJS

1

I created a module in Angular JS that takes the current date of the clock and starts counting until the end, but I need to be able to set a starting date to start the count that is not based on the clock, how do I do this?

    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);
                };

            }

        };
    });

And here's the current policy:

<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>

The idea is to change by making a directive this way:

  <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>

Here is an example that works: link

And that was my frustrated attempt: link

    
asked by anonymous 29.08.2015 / 00:37

1 answer

1

What I thought was that you always got the same starting date for the count, so the counter's result did not change. Then I created the parameter currDate , where the current date of the counter is stored:

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

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

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

In the above code it is checked if params.currDate is null in the case of the first iteration. If it is it receives the starting date. After that, currDate will only work with the object Date of the current date, adding one second to each iteration, to approach the end date.

Fiddle E here finishing the counter.

    
29.08.2015 / 14:42