A Pen by John Josef on CodePen.
AngularJS Semantic Dates
A Pen by John Josef on CodePen.
AngularJS Semantic Dates
| <div ng-app="TypefooApp"> | |
| <div ng-controller="MainCtrl"> | |
| <ul> | |
| <li ng-repeat="d in dates"> | |
| <span ng-bind="d | semanticDate"></span> | |
| </li> | |
| </div> | |
| </div> |
| 'use strict'; | |
| angular.module('TypefooApp', ['TypefooApp.filters']); | |
| angular.module('TypefooApp') | |
| .controller('MainCtrl', function($scope) { | |
| var now = new Date(); | |
| $scope.dates = [ | |
| new Date(), | |
| new Date().setDate(now.getDate()-1), | |
| new Date().setDate(now.getDate()-2), | |
| new Date().setDate(now.getDate()-3) | |
| ]; | |
| }); | |
| angular.module('TypefooApp.filters', []) | |
| .filter('semanticDate', function() { | |
| return function(input, options) { | |
| var out = ''; | |
| var now = new Date(); | |
| var onedayago = new Date(); | |
| onedayago.setDate(onedayago.getDate() - 1); | |
| var d = new Date(input); | |
| var today = now.getDate() + now.getMonth() + now.getFullYear(); | |
| var yesterday = onedayago.getDate() + onedayago.getMonth() + onedayago.getFullYear(); | |
| var compare_date = d.getDate() + d.getMonth() + d.getFullYear(); | |
| var time = (d.getHours() > 11 ? (d.getHours() - 12) + ':' + d.getMinutes() + 'pm' : (d.getHours()) + ':' + + d.getMinutes() + 'am'); | |
| if(today === compare_date) { | |
| out = 'Today ' + time; | |
| } else { | |
| if(compare_date === yesterday) { | |
| out = 'Yesterday ' + time; | |
| } else { | |
| out = (d.getMonth() + 1) + '/' + (d.getDate()) + '/' + (d.getFullYear()) + ' ' + time; | |
| } | |
| } | |
| return out; | |
| } | |
| }); |