CODEWITHSUNDEEP
javascriptangularjsdatefilter
thank_you
thank_you

Reputation: 11107

Angular Filter by Date Returning mm-dd-yyyy

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.

Upvotes: 2

Views: 7263

Answers (6)

Krish Nakum R
Krish Nakum R

Reputation: 545

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.

Upvotes: 0

JcT
JcT

Reputation: 3569

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>

Upvotes: 3

zs2020
zs2020

Reputation: 54514

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>

Upvotes: 1

Hong Yi
Hong Yi

Reputation: 74

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)

Upvotes: 0

Deenadhayalan Manoharan
Deenadhayalan Manoharan

Reputation: 5444

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

Upvotes: 0

Steven Wexler
Steven Wexler

Reputation: 17279

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

Upvotes: 0

Related Questions