How to display ticking clock with differnce time from specific time (hours , minutes and seconds) in AngularJS?

Directive code :

app.directive('clock', ['dateFilter', '$timeout', function (dateFilter, $timeout) {
    return {
        restrict: 'E',
        scope: {
            format: '@',
        },
        link: function (scope, element, attrs) {
            var updateTime = function () {
                //GET UTC DATE TIME BY USING MOMENT JS
                var now = moment(new Date()).utc().format('YYYY-MM-DD HH:mm:ss')
                //CREATED AT DATE TIME
                var then = attrs.time;

                //GET DIFFERENCT BETWEEN CURRENT UTC DATE TIME AND CREATED AT DATE TIME 
                var ms = moment(now, "YYYY-MM-DD HH:mm:ss").diff(moment(then, "YYYY-MM-DD HH:mm:ss"));
                var d1 = moment.duration(ms);
                var curr_now = Math.floor(d1.asHours()) + moment.utc(ms).format(":mm:ss");

                element.html(dateFilter(curr_now, scope.format));
                $timeout(updateTime, curr_now % 1000);
            };
            updateTime();
        }
    };
}]);

HTML Code :

<clock time="{{data.create_datetime}}" format="HH:mm:ss"></clock>

You may also like

1 Comment

Leave a Reply