I'm running a filter in my controller but I'm unable to filter the date appropriately.

Ideally I want this Thu Mar 31 2016 05:05:00 GMT-0400 (EDT).

However, when I run the code the results equal 03-31-2016.

My code in my controller

$scope.date = "2016-03-31T05:05:00Z";

var results = $filter('date')($scope.date, "EEE MMM DD YYYY HH:mm:ss GMT Z (EDT)");

What's wrong and how do I fix this? Angular version 1.2.26.

I'm running a filter in my controller but I'm unable to filter the date appropriately.

Ideally I want this Thu Mar 31 2016 05:05:00 GMT-0400 (EDT).

However, when I run the code the results equal 03-31-2016.

My code in my controller

$scope.date = "2016-03-31T05:05:00Z";

var results = $filter('date')($scope.date, "EEE MMM DD YYYY HH:mm:ss GMT Z (EDT)");

What's wrong and how do I fix this? Angular version 1.2.26.

• javascript
• angularjs
• date
• filter

• Based on your responses to the answers below, it seems your issue is not related to the $filter service. Please put up a fiddle. – Angad Commented Mar 25, 2015 at 23:10

6 Answers 6

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/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/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./ajax/libs/angularjs/1.2.26/angular.min.js"></script>

<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="http://momentjs./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./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
    <div ng-controller="ctrl">{{results}}</div>
</div>

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

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/prash/Cp73s/323/light/ Reference:http://angulartutorial.blogspot.in/2014/04/date-filtering-and-formatting-in.html

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)

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

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

See the angular documentation.