Show only date in AngularJS

Question

I have a JSON array like this one:

[
{
    "user": "345",
    "createdOn": "2015-09-01 13:17:22"
},
{
    "user": "432",
    "createdOn": "2015-09-01 13:27:56"
}

]

In a <div> tag I am doing this:

 <div> class="row" ng-repeat="item in array"             
         {{item.createdOn}}
 </div>

The output is : 2015-09-01 13:50:59, but I don't want the time part to be shown, i.e. required output is just 2015-09-01. I tried using filter but unsuccessfully. Give me some knowledge on this, please.

use split if it's always a string, or use Date instead and then filter it — akalikin, Sep 07 '15 at 10:12
Did it solved your issue? Or do you need more details or answers? — Aminadav Glickshtein, Sep 07 '15 at 16:36
So you can click accept answers, of the solution you most like — Aminadav Glickshtein, Sep 08 '15 at 21:55

score 8 · Answer 1 · edited Jan 08 '16 at 21:01

8

If your object is fetching data from db and timestamp is returned properly, and your date is formatted as 'yyyy-MM-dd', this should work.

{{item.createdOn| date:'yyyy-MM-dd'}}

Otherwise, format your string as a Date. (This is detailed in other answers.)

edited Jan 08 '16 at 21:01

Barett

5,826
6
51
55

answered Sep 07 '15 at 10:03

Nishith Kant Chaturvedi

4,719
2
16
24

What is the error in your console ? It should work, try clearing cache – Nishith Kant Chaturvedi Sep 07 '15 at 10:08
1

Please consider editing your post to add more explanation about what your code does and why it will solve the problem. An answer that mostly just contains code (even if it's working) usually wont help the OP to understand their problem. – SuperBiasedMan Sep 07 '15 at 10:31
If your object is fetching data from db and timestamp is retuned /date id properly return it should work....else format your string in Date as suggested in above answers – Nishith Kant Chaturvedi Sep 07 '15 at 10:38

Vicky Gonsalves · Answer 2 · 2015-09-07T10:25:32.597

1

You need to use Angular filter But Date filters only work with Date objects so first thing you need to convert your strings into Date object.

 <div ng-repeat="item in array">
    {{getDateFormat(item.createdOn)|date:'yyyy-MM-dd'}}
  </div>

Controller:

  $scope.array = [{
    "user": "345",
    "createdOn": "2015-09-01 13:17:22"
  }, {
    "user": "432",
    "createdOn": "2015-09-01 13:27:56"
  }];

  $scope.getDateFormat = function(timestamp) {
    return new Date(timestamp);
  }

Plunker

edited Sep 07 '15 at 10:25

answered Sep 07 '15 at 10:04

Vicky Gonsalves

11,593
2
37
58

i tried that..still it is showing both date and time – varunaer Sep 07 '15 at 10:06

Aminadav Glickshtein · Answer 3 · 2015-09-07T10:27:30.083

1

The short answer:

**Date filter in Angular works better with Date objects.**

Please run this code snippet:

angular.module('app',[]).controller('a',function($scope){
$scope.a='2012-08-30 13:30:00'
$scope.b=new Date('2012-08-30 13:30:00')
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app=app ng-controller=a>
{{a|date:'mm-dd-yy'}}
 <hr>
  {{b|date:'mm-dd-yy'}}
 </div>

This is the fix for you code:

var obj=    [{
    "user": "345",
    "createdOn": new Date("2015-09-01 13:17:22")
},
{
    "user": "432",
    "createdOn": new Date("2015-09-01 13:27:56")
}
]

You can see the example that when I use date object it works.

If you got the object from external sources you can convert it to Date objects. using this code:

for(var i=0;i<obj.length;i++) obj[i].createdOn=new Date(obj[i].createdOn)

edited Sep 07 '15 at 10:27

answered Sep 07 '15 at 10:09

Aminadav Glickshtein

23,232
12
77
117

What if user is not allowed to touch JSON? – Vicky Gonsalves Sep 07 '15 at 10:18
Please see the end of the answer, how to convert it to Date objects in the JSON. One line of for() – Aminadav Glickshtein Sep 07 '15 at 10:19
For var in loop is bad idea.. Refer http://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-such-a-bad-idea – Vicky Gonsalves Sep 07 '15 at 10:23
Thank you. Changed to regular for() – Aminadav Glickshtein Sep 07 '15 at 10:27

Md Ashaduzzaman · Answer 4 · 2015-09-07T10:29:23.610

You can create your own custom filter in this case,

Try this,

HTML :

<div ng-controller="MainCtrl">
    <div ng-repeat="data in datas">
        {{data.createdOn | dateOnly}}
    </div>
</div>

angularjs :

angular.module("myapp", []).controller('MainCtrl', ["$scope", function($scope){
    var data = [
    {
        "user": "345",
        "createdOn": "2015-09-01 13:17:22"
    },
    {
        "user": "432",
        "createdOn": "2015-09-01 13:27:56"
    }];

    $scope.datas = data;
    }])
    .filter("dateOnly", function(){
        return function(input){
            return input.split(' ')[0]; // you can filter your datetime object here as required.
        };
    });

jsFiddle

score 1 · Accepted Answer · edited Jan 08 '16 at 20:46

1

$scope.dateOnly= function(timestamp) {
    return new Date(timestamp);
}

will help

edited Jan 08 '16 at 20:46

The_Black_Smurf

5,178
14
52
78

answered Jan 08 '16 at 16:26

varun aaruru

2,920
1
20
36

Please consider editing your post to add more explanation about what your code does and why it will solve the problem. An answer that mostly just contains code (even if it's working) usually wont help the OP to understand their problem. – Barett Jan 08 '16 at 17:54
Ok.. will do it now ..Thanks for warning me:) – varun aaruru Jan 08 '16 at 17:56

Show only date in AngularJS

5 Answers5

Date filter in Angular works better with Date objects.

**Date filter in Angular works better with Date objects.**