Friday, 8 January 2016

Date format Using Custom filter

------------------------ JS file -----------------------
var app = angular.module('dateFilter', []);

app.controller('MainCtrl', function($scope, $filter) {
  $scope.dt = '2014-08-03T12:38:42.744Z';
});

app.filter('dateSuffix', function($filter) {
  var suffixes = ["th", "st", "nd", "rd"];
  return function(input) {
    var dtfilter = $filter('date')(input, 'MMMM dd yyyy');
    var data=dtfilter.split(" ");
    var finaldate="";
   if(data){
    var month=data[0];
        var day=data[1];
        var year=data[2];

    var relevantDigits = (day < 30) ? day % 20 : day % 30;
    var suffix = (relevantDigits <= 3) ? suffixes[relevantDigits] : suffixes[0];
    finaldate=month+" "+day+suffix+", "+year;
   }
   
    return finaldate;
  };


});


-------------------------- html ---------------------------
<html ng-app="dateFilter">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Date Filter</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.16/angular.js" data-semver="1.2.16"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <input ng-model="dt">
    <p id="summaryHeader">Calendar of {{dt|dateSuffix}}</p>
    
  </body>


</html>


No comments:

Post a Comment