Angular Filter by Date Returning mm-dd-yyyy

The following demonstrates it with filters, and alternatively using momentjs which allows for better timezone and formatting control.

Note that angularjs filters are limited to running using the browser's timezone.

Also note that I've jammed momentjs (with timezone support) straight in there, but there are a few different wrappers out there for providing it as a service and/or directive in a more 'angular-ified' way.

(function() {
  
  "use strict";
  
  angular.module("app", [])
    .controller("ctrl1", ["$scope", "$filter", CtrlOne])
    .controller("ctrl2", ["$scope", "$filter", "$window", CtrlTwo]);

  function CtrlOne($scope, $filter) {
    // See 'Timezones' at bottom of: https://code.angularjs.org/1.2.26/docs/guide/i18n
    // Basically, using filter will always use the timezone of the browser, so hard-
    // coding '(EDT)' will be incorrect for anyone not in your timezone.
    $scope.date = "2016-03-31T05:05:00Z"; //Note that 'Z' means UTC 0
    $scope.results = $filter('date')($scope.date, "EEE MMM dd yyyy HH:mm:ss 'GMT'Z '(EDT)'");
  }

  function CtrlTwo($scope, $filter, $window) {
    // MomentJS with timezones allows you to specify timezones, and provides more formatting options.
    // Also, note that the date string being formatted below uses -04:00 instead of Z to indicate its timezone.
    // See: http://en.wikipedia.org/wiki/ISO_8601#Time_zone_designators
    var moment = $window.moment;
    $scope.results = moment.tz("2016-03-31T05:05:00-04:00", "America/New_York").format("ddd MMM DD YYYY HH:mm:ss [GMT]Z [(]z[)]");
  }
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="http://momentjs.com/downloads/moment-timezone-with-data-2010-2020.min.js"></script>
<div ng-app="app">
  <div ng-controller="ctrl1"><strong>angular filter</strong>, will only be correct for browsers in EDT:<br />{{results}}</div>
  <br />
  <div ng-controller="ctrl2"><strong>momentjs</strong> allowing some timezone control and better formatting:<br />{{results}}</div>
</div>

Your filter is not right. Use this

angular.module("app", []).controller("ctrl", ["$scope", "$filter", function ($scope, $filter) {
    $scope.date = "2016-03-31T05:05:00Z";
    $scope.results = $filter('date')($scope.date, "yyyy-MM-ddTHH:mm:ss.sssZ");
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
    <div ng-controller="ctrl">{{results}}</div>
</div>

Try this..

    <div ng-app="sampleapp">
<div ng-controller="samplecontoller" ng-init="init();">
    <div ng-repeat="date in dates" class="dateformatter">

<span><strong>Date</strong> : {{ date.date1 }}</span>
<span><strong>Date Format</strong> : {{ date.date1 | dateFormat }}</span>
<span><strong>Date Format</strong> : {{ date.date1 | dateFormat1 }}</span>
<span><strong>Time Format</strong> : {{ date.date1 | time }}</span>
<span><strong>Date time Format</strong> : {{ date.date1 | datetime }}</span>
<span><strong>Date time Format</strong> : {{ date.date1 | datetime1 }}</span>

    </div>
    </div>
</div>

var myapp = angular.module('sampleapp', [ ]);

myapp.controller('samplecontoller', function ($scope ,$interval ) {

    $scope.init = $interval(function(){

    var date = new Date();
    $scope.dates = [{ "date1" : date }]

     },100 )

});
myapp.filter('dateFormat', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 

  var _date = $filter('date')(new Date(input), 'MMM dd yyyy');

  return _date.toUpperCase();

 };
});
myapp.filter('dateFormat1', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 

  var _date = $filter('date')(new Date(input), 'MM dd yyyy');

  return _date.toUpperCase();

 };
});

myapp.filter('time', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 

  var _date = $filter('date')(new Date(input), 'HH:mm:ss');

  return _date.toUpperCase();

 };
});
myapp.filter('datetime', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 

  var _date = $filter('date')(new Date(input),
                              'MMM dd yyyy - HH:mm:ss');

  return _date.toUpperCase();

 };
});
myapp.filter('datetime1', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 

  var _date = $filter('date')(new Date(input),
                              'MM dd yyyy - HH:mm:ss');

  return _date.toUpperCase();

 };
});

Demo:http://jsfiddle.net/prash/Cp73s/323/light/ Reference:http://angulartutorial.blogspot.in/2014/04/date-filtering-and-formatting-in.html

The problem is with your parameters , "EEE MMM DD YYYY HH:mm:ss"

change it to
"EEE MMM dd yyyy HH:mm:ss"

Its quite clearly mentioned in the angular documentation too.

I'm not sure how you're getting 03-31-2016. But it looks like your filter is pretty close. DD should be dd. YYYY should be yyyy. And the M in GMT needs to be escaped with single quotes. Also, it looks like you're not specifying timezone. You should specify a timezone after the Z or remove Z.

var result = $filter('date')("2016-03-31T05:05:00", "EEE MMM dd yyyy HH:mm:ss G'M'TZ (EDT)", "");
console.log(result);

Thu Mar 31 2016 05:05:00 GMT-0400 (EDT)

JS Fiddle

I've tested with the code below. I think this is what you want.

.js code:

 var result = $filter('date')('2016-03-31T05:05:00Z', 'EEE MMM dd yyyy HH:mm:ss GMT Z (EDT)');
    console.log(result);

.html

{{dtEmp | date: 'EEE MMM dd yyyy HH:mm:ss GMT Z (EDT)' }}

and clean the browser's cache, please.

Result

Thu Mar 31 2016 16:05:00 AD3T +1100 (EDT)