Time Format Filter
Shows using angular filter to format time in plain english.
by Josh Carroll
HTML
<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-route.min.js"></script>
<!-- Ugly Hack to make AngularJS routing work inside of jsFiddle -->
<base href="/" />
<div class="container" ng-controller="timeController">
<div class='time'>{{time | prettyTime}}</div>
</div>
CSS
.time{
font-weight:bold;
font-size:2em;
}
JavaScript
(function () {
angular.element(document).ready(function () {
var module = angular.module('demo', ['ngRoute']);
module.controller('timeController', function ($scope) {
$scope.time = new Date("2014-03-13T10:48:02.991Z");
});
module.filter('prettyTime', function () {
return function timeSince(ts) {
var now = new Date();
var delta = now.getTime() - ts.getTime();
delta = delta / 1000; //us to s
var ps, pm, ph, pd, min, hou, sec, days;
if (delta <= 59) {
ps = (delta > 1) ? "s" : "";
return delta + " second" + ps;
}
if (delta >= 60 && delta <= 3599) {
min = Math.floor(delta / 60);
sec = delta - (min * 60);
pm = (min > 1) ? "s" : "";
ps = (sec > 1) ? "s" : "";
return min + " minute" + pm + " " + sec + " second" + ps;
}
if (delta >= 3600 && delta <= 86399) {
hou = Math.floor(delta / 3600);
min = Math.floor((delta - (hou * 3600)) / 60);
ph = (hou > 1) ? "s" : "";
pm = (min > 1) ? "s" : "";
return hou + " hour" + ph + " " + min + " minute" + pm;
}
if (delta >= 86400) {
days = Math.floor(delta / 86400);
hou = Math.floor((delta - (days * 86400)) / 60 / 60);
pd = (days > 1) ? "s" : "";
ph = (hou > 1) ? "s" : "";
return days + " day" + pd + " " + hou + " hour" + ph;
}
};
});
angular.bootstrap(document, ['demo']);
});
}());