AngularJS Semantic Dates

A-Pen-by-John-Josef.markdown

A Pen by John Josef

A Pen by John Josef on CodePen.

AngularJS Semantic Dates

License.

index.html

<div ng-app="TypefooApp">
  <div ng-controller="MainCtrl">
    <ul>
      <li ng-repeat="d in dates">
        <span ng-bind="d | semanticDate"></span>
      </li>
  </div>
</div>

script.js

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