Angular JS Date format filter inside Ng-Repeat not formatting

Question

Actual Date coming from JSON

Need to format it as below .

Effective Date : 2010-08-31 (trim the time stamp)
End Date : 2010-08-31 (trim the time stamp)

Am using the below code for Formatting the date inside Ng-Repeat.

    <li ng-repeat="product in data | startFrom:currentPage*pageSize | limitTo:pageSize"
           ng-click="getAttributes(product)">   
       {{product.prod_start_date| date:'MM/dd/yyyy'}}
       {{product.prod_end_date| date:'MM/dd/yyyy'}}
    </li>

But it doesnt work still displays the same.

Should the Date be passed as new Date as shown in the below jsfiddle Example http://jsfiddle.net/southerd/xG2t8/

Note sure how to do that inside ng-repeat.?? Kindly help me on this. Thanks in Advance

Answer 1

I created my own filter to address this. The date filter cant take a string, needs a date object.

.filter('cmdate', [
    '$filter', function($filter) {
        return function(input, format) {
            return $filter('date')(new Date(input), format);
        };
    }
]);

then you can do:

{{product.prod_start_date| cmdate:'MM/dd/yyyy'}}

Answer 2

I use moment.js for my UI date time handling (there even a nice angular-moment bower package as well)

• http://momentjs.com
• https://github.com/urish/angular-moment

usage:

<span>{{product.prod_start_date | amDateFormat:'MM/dd/yyyy'}}</span>

It has a bunch of other options as well with relative dates etc.

Answer 3

I have updated the controller that you showed in the fiddle and here is your updated filter

Here I made use of the $filter('date') which is a feature of Angular itself in order to format the date in the desired format.

Here is the controller:

function Scoper($scope,$filter) {
    $scope.s = "2012-10-16T17:57:28.556094Z";
    var dateObj = new Date($scope.s);
    $scope.dateToShow = $filter('date')(dateObj,'yyyy-MM-dd');
    console.log($scope.dateToShow);
}