Angular Countdown Directive

by

Countdown help to display timer for selected event like something is going to expiry or live on following time. Like if you have created a deal section on your angular page and want to display deal expiry countdown then this Angular Countdown Directive is useful for you. you cal also see Popular jQuery countdown list and choose as per your need.

Angular Countdown Directive

HTML

















        


























        


























        






Expired Countdown!



CSS

body {
  font: 12px Arial;
  background: white;
}
a.gh {
  font-size: larger;
  font-weight: bold;
  text-decoration: none;
  background: blue;
  color: white;
  padding: 6px 14px;
  border-radius: 4px;
}

.countdown-con {
    text-align: center;
    font-size: 10px;
}
.countdown-xs {
    font-size: 9px;
}
.countdown-sm {
    font-size: 11px;
}
.countdown-md {
    font-size: 14px;
}
.countdown-lg {
    font-size: 20px;
}
.countdown .well {
    padding: 0;
    display: inline-block;
    width: 1.8em;
    line-height: 1.6em;
    border: 3px solid #54ABAE;
    box-shadow: none;
    background: white;
    margin: 3px auto;
    border-radius: 0;
}
.countdown h1 {
    font-size: 2.5em;
    font-weight: bold;
}
.countdown h2 {
    font-size: 1.6em;
    font-weight: bold;
    margin: 10px 0 5px;
}
.countdown h4 {
    font-size: 1.4em;
    font-weight: normal;
    text-transform: uppercase;
    margin: 0 0 5px;
    color: #54ABAE;
}
.countdown .row {
    white-space: nowrap;
}
.countdown .row-colons .col-xs-4:not(:last-child):after {
    content: ':';
    position: absolute;
    font-size: 4.7em;
    right: -0.17em;
    top: -0.12em;
    font-weight: normal;
    color: #54ABAE;
}
.countdown [class^="col-"] {
    float: none;
    display: inline-block;
    width: auto;
    padding: 0 8px;
    position: relative;
}
.countdown-con.orange .well {
    border-color: #FF9E15;
}
.countdown-con.orange h4 {
    color: #FF9E15;
}
.countdown-con.orange .row-colons .col-xs-4:not(:last-child):after {
    color: #FF9E15;
}



AngularJS

  (function() {
    angular.module('app', []);
    angular.module('app').controller('demoController', demoController);

    demoController.$inject = ['$scope']; 
    function demoController($scope) {
      var vm = this;
      vm.tomorrow = new Date();
      vm.tomorrow.setHours(24,0,0,0); // midnignt tomorrow

      vm.xmas = new Date();
      vm.xmas.setMonth(11);
      vm.xmas.setDate(25);
      vm.xmas.setHours(0,0,0,0); // midnignt
      
      vm.expired = {};
      
      vm.expiring = new Date();
      vm.expiring.setTime(vm.expiring.getTime() + 1000 * 10); // expiring in 10 seconds
      
      $scope.$on('countdown-expired', function(event, exp) {
        vm.expired[exp.name] = true;
      });
    }

    angular.module('app').controller('countdownController', countdownController);
    countdownController.$inject = ['$interval', '$scope']; 
    
    function countdownController($interval, $scope) {
      /* jshint validthis:true */
      var vm = this;
      vm.targetDate;  // targetDate is bound via the directive
      vm.countdownTitle; // title is bound via the directive
      vm.countdownId; // countdownId is bound via the directive
      vm.countdownTitleDisplay = vm.countdownTitle;

      if (vm.targetDate == '') {
        vm.targetDate = null;
      }

      vm.hasDate = !!vm.targetDate;
      if (!vm.hasDate) {
        vm.countdownTitleDisplay = vm.countdownTitle.replace("Coming In", '');
        return;
      }

      var endDate = new Date(vm.targetDate);

      vm.days;
      vm.hours;
      vm.minutes;
      vm.seconds;

      var msPerSecond = 1000;
      var msPerMinute = 60 * msPerSecond;
      var msPerHour = msPerMinute * 60;
      var msPerDay = msPerHour * 24;
      var stop;

      activate();

      function activate() {
        var timeDiff = endDate.getTime() - new Date().getTime();
        if (timeDiff <= 0) {
          vm.days = vm.hours = vm.minutes = vm.seconds = 0;
          stop && $interval.cancel(stop);
          stop = undefined;
          $scope.$emit('countdown-expired', { name: vm.countdownId });
          return;
        }

        vm.days = Math.floor(timeDiff / msPerDay);
        timeDiff -= vm.days * msPerDay;
        vm.hours = Math.floor(timeDiff / msPerHour);
        timeDiff -= vm.hours * msPerHour;
        vm.minutes = Math.floor(timeDiff / msPerMinute);
        timeDiff -= vm.minutes * msPerMinute;
        vm.seconds = Math.floor(timeDiff / msPerSecond);
      }

      stop = $interval(activate, msPerSecond);
    }
    
    angular.module('app').directive('countdown', countdown);
    countdown.$inject = [];
    
    function countdown () {
      // Usage:
      //     
      // Creates:
      // 
      return {
        restrict: 'E',
        templateUrl: '/dist/countdown.html',
        controller: 'countdownController',
        controllerAs: 'vm',
        scope: {
          targetDate: '=',
          countdownTitle: '@',
          countdownId: '@'
        },
        bindToController: true
      };
    }
})();

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by HugeHugh. Visit their official repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Published by Rohit