dkomando/AngularJS - $filter - Date Ordinal

## AngularJS - $filter - Date Ordinal
/*
	Notes ----------------------------------------------------
	Inspired By:
	http://plnkr.co/edit/v2RuF72A9OPpFj5fvN8A?p=preview

	My Updated Plunker Of The Inspired Code:
	http://plnkr.co/edit/rkyc041jmSfzkEbqhcfL?p=preview
*/

## app.js
// App -------------------------------------------------------------------------
var myApp = angular.module('myApp', []);

myApp
  .controller('myController',myController);

  myController.$inject = ['$scope','$filter'];
  function myController($scope,$filter){
    $scope.myDate = '2016-02-29';
    $scope.myFilteredDate = $filter('setOrdinal')('2016-02-29');
  }

// Filters ---------------------------------------------------------------------
myApp
	.filter('setOrdinal', setOrdinal);

	setOrdinal.$inject = ['$filter'];
	function setOrdinal($filter){
		return function (input){
			function ordinal(number){ // Function from MomentJS
				var b = number % 10,
						output = (parseInt(number % 100 / 10) === 1) ? 'th' : (b === 1) ? 'st' : (b === 2) ? 'nd' : (b === 3) ? 'rd' : 'th';
				return number + output;
			}
			var date = $filter('date'),
					// https://docs.angularjs.org/api/ng/filter/date
					month = date(input,'MMMM'),
					day = date(input,'d'),
					year = date(input,'yyyy');
			day = ordinal(day);
			return month+' '+day+', '+year; // Output date however you need it here!
		};
	}

## index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
	<meta charset="UTF-8">
	<title>Fake Usage Document</title>
</head>
<body>

<div ng-controller="myController">
  Cleaned Date: <span ng-bind="myDate | setOrdinal"></span><br>
  My Pre-filtered Date: <span ng-bind="myFilteredDate"></span>
</div>

<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="app.js"></script>

</body>
</html>
	/*
	Notes ----------------------------------------------------
	Inspired By:
	http://plnkr.co/edit/v2RuF72A9OPpFj5fvN8A?p=preview

	My Updated Plunker Of The Inspired Code:
	http://plnkr.co/edit/rkyc041jmSfzkEbqhcfL?p=preview
	*/
	// App -------------------------------------------------------------------------
	var myApp = angular.module('myApp', []);

	myApp
	.controller('myController',myController);

	myController.$inject = ['$scope','$filter'];
	function myController($scope,$filter){
	$scope.myDate = '2016-02-29';
	$scope.myFilteredDate = $filter('setOrdinal')('2016-02-29');
	}

	// Filters ---------------------------------------------------------------------
	myApp
	.filter('setOrdinal', setOrdinal);

	setOrdinal.$inject = ['$filter'];
	function setOrdinal($filter){
	return function (input){
	function ordinal(number){ // Function from MomentJS
	var b = number % 10,
	output = (parseInt(number % 100 / 10) === 1) ? 'th' : (b === 1) ? 'st' : (b === 2) ? 'nd' : (b === 3) ? 'rd' : 'th';
	return number + output;
	}
	var date = $filter('date'),
	// https://docs.angularjs.org/api/ng/filter/date
	month = date(input,'MMMM'),
	day = date(input,'d'),
	year = date(input,'yyyy');
	day = ordinal(day);
	return month+' '+day+', '+year; // Output date however you need it here!
	};
	}
	<!DOCTYPE html>
	<html lang="en" ng-app="myApp">
	<head>
	<meta charset="UTF-8">
	<title>Fake Usage Document</title>
	</head>
	<body>

	<div ng-controller="myController">
	Cleaned Date: <span ng-bind="myDate \| setOrdinal"></span><br>
	My Pre-filtered Date: <span ng-bind="myFilteredDate"></span>
	</div>

	<!-- Angular -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
	<script src="app.js"></script>

	</body>
	</html>