Angular JS Date filter not working

Question

I have an ng-repeat element which will loop through $http.get() result.

<tr ng-repeat="blog in posts">
     <td style="text-align:center">{{ $index+1 }}</td>
     <td>{{ blog.title }}</td>
     <td>
         {{ blog.author.name }}
     </td>
     <td>
         {{ blog.created_at | date:'MMM-dd-yyyy' }}
     </td>
</tr>

I have created_at as timestamp in MySQL database table. And I am using angular.js v1.0.7.

I am getting the same output from db table and date filter is not working. How can I solve this?

My ajax call,

$http({method: 'GET', url: 'http://localhost/app/blogs'}).
success(function(data, status, headers, config) {
    $scope.posts = data.posts;
}).
error(function(data, status, headers, config) {
    $scope.posts = [];
});

KyleMit · Accepted Answer · 2014-08-20 22:19:30Z

42

The date passed to the filter needs to be of type javascript Date.

Have you checked what the value blog.created_at is displayed as without the filter?

You said your backed service is returning a string representing the date. You can resolve this in two ways:

Make your server-side code return a json date object
- check how the server side code serialize the json that it returns
Write your own filter which accepts the string date and returns date in the required format
- Note: you can call the angular filter in your own filter

You can write your own filter as follows:

app.filter('myDateFormat', function myDateFormat($filter){
  return function(text){
    var  tempdate= new Date(text.replace(/-/g,"/"));
    return $filter('date')(tempdate, "MMM-dd-yyyy");
  }
});

And use it like this in your template:

<td>
  {{ blog.created_at | myDateFormat }}
</td>

Rather than looping through the returned array and then applying the filter

edited Aug 20, 2014 at 22:19

KyleMit♦

31.4k74 gold badges517 silver badges712 bronze badges

answered Oct 29, 2013 at 9:02

Anoopsingh Bayes

5431 gold badge4 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Anshad Vattapoyil Over a year ago

I have noticed this in some of answers. But how can I achieve this in my $http call ? Both time I am getting 2013-10-08 00:00:00

Anshad Vattapoyil Over a year ago

Thanks, I have described that I have my date in timestamp format,and I have expected clear code with my snippet. So to convert this I have to use some regex. I have posted my final working result.

UberNeo Over a year ago

adding split('.')[0] works for me .. so the new tempdate looks likes as -- var tempdate= new Date((text.replace(/-/g,"/").split('.')[0]));

atilkan Over a year ago

there is built in methods for this. Why do you use a framework

Anshad Vattapoyil · Accepted Answer · 2015-04-28 11:28:53Z

15

From the server side, it returns the created_at as string from the laravel eloquent.

This can be solved using this javascript,

new Date("date string here".replace(/-/g,"/"));

So the code,

$http({method: 'GET', url: 'http://localhost/app/blogs'}).
success(function(data, status, headers, config) {
   angular.forEach(data.posts, function(value, key){
     data.posts[key].created_at = new Date(data.posts[key].created_at.replace(/-/g,"/"));
   }
   $scope.posts = data.posts;
}).
error(function(data, status, headers, config) {
    $scope.posts = [];
});

edited Apr 28, 2015 at 11:28

answered Oct 29, 2013 at 10:25

Anshad Vattapoyil

23.5k19 gold badges90 silver badges134 bronze badges

2 Comments

Vignesh Over a year ago

why not angular forEach

Anshad Vattapoyil Over a year ago

@Vignesh Yes, I should utilize that.

Mhd Wael Jazmati · Accepted Answer · 2017-01-07 10:40:17Z

9

you can add a custom Filter which convert string to date, as the following code:

app.filter('stringToDate',function ($filter){
    return function (ele,dateFormat){
        return $filter('date')(new Date(ele),dateFormat);
    }
})

then use this filter in any template as the following code:

<div ng-repeat = "a in data">{{a.created_at |stringToDate:"medium"}}</div>

answered Jan 7, 2017 at 10:40

Mhd Wael Jazmati

6839 silver badges18 bronze badges

Comments

Maxim Shoustin · Accepted Answer · 2013-10-29 09:33:45Z

6

You can create new Date(/*...*/) based on fetched data from $http.get, like:

$scope.date = new Date('2013', '10', '28'); // for example

Anyways you can see this Demo in Plunker.

Hope it will help you

answered Oct 29, 2013 at 9:33

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

1 Comment

Anshad Vattapoyil Over a year ago

Thanks, I have described that I have my date in timestamp format. So to convert this I have to use some regex. I have posted my final working result.

Yang Zhang · Accepted Answer · 2015-02-02 06:00:14Z

2

When record date variable remember to use 'new' keyword as below:

var time = new Date();

otherwise if you write as this:

var time = Date();

Date is called as a function and a date time string will be returned which cannot be used as input to the filter.

answered Feb 2, 2015 at 6:00

Yang Zhang

4,5704 gold badges39 silver badges35 bronze badges

Collectives™ on Stack Overflow

Angular JS Date filter not working

5 Answers 5

4 Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related