Change the date time format in angularjs

Question

I'm getting date and time from the api. I want to change the date and time format.

I'm getting like this "2016-05-12","07:17:35".

Change the format like 12-may-2016 7:30 PM:

<table class="table">
    <thead>
        <tr>
            <th>Time</th>
            <th>Place</th>
        </tr>
    </thead>
    <tbody ng-repeat="l in dataget">
        <tr>                    
            <td>{{l['time']}}</td>
            <td>{{l['place']}}</td>                             
        </tr>
    </tbody>
</table>

Are you getting date like this "2016-05-12","07:17:35", or "2016-05-12 07:17:35" this?? — Poonam
– Poonam, Commented May 19, 2016 at 6:37

Shadi Shaaban · Accepted Answer · 2016-05-19 06:39:13Z

1

use the date filter

<table class="table" ng-repeat="a in list_alerts">
<thead><tr>
<th>Time</th>
<th>Place</th>
</tr>
</thead>
<tbody ng-repeat="l in dataget">
<tr>                    
<td>{{l['time']| date : format}}</td>
<td>{{l['place']}}</td>                             
</tr>
</tbody>
</table>

the format should be replaced with one of the possible accepted values, for the format that displays the desired output, check the possible values from angular api: https://docs.angularjs.org/api/ng/filter/date

here is an example that uses the 'short' format:

<table class="table" ng-repeat="a in list_alerts">
<thead><tr>
<th>Time</th>
<th>Place</th>
</tr>
</thead>
<tbody ng-repeat="l in dataget">
<tr>                    
<td>{{l['time']| date : 'short'}}</td>
<td>{{l['place']}}</td>                             
</tr>
</tbody>
</table>

answered May 19, 2016 at 6:39

Shadi Shaaban

1,7081 gold badge11 silver badges17 bronze badges

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

Comments

Thangadurai · Accepted Answer · 2016-05-19 06:42:00Z

0

Use date:format after object with pipe symbol.

For Example Click here

answered May 19, 2016 at 6:42

Thangadurai

5441 gold badge9 silver badges21 bronze badges

Comments

Venu prasad H S · Accepted Answer · 2016-05-19 07:03:02Z

0

I think this helps,

app.controller("myCtrl", function($scope,$filter) {
    $scope.dateString = '"2016-05-12","07:17:35"';
    $scope.finalFormat = $filter('date')(new Date($scope.dateString.substring(1,11) +" "+ $scope.dateString.substring(14,22)),'dd-MMM-yyyy hh:mm a');
});

answered May 19, 2016 at 7:03

Venu prasad H S

2411 silver badge8 bronze badges

Comments

Marin Takanov · Accepted Answer · 2016-05-20 06:46:05Z

0

As stated here, you need to write it like this: {{yourDate | date: 'dd-MMM-yyyy hh:mm a'}}.
The result of this will be 12-May-2016 7:30 PM

edited May 20, 2016 at 6:46

answered May 19, 2016 at 6:39

Marin Takanov

1,1484 gold badges20 silver badges38 bronze badges

Comments

Łukasz · Accepted Answer · 2016-05-20 08:22:03Z

0

Check date format https://docs.angularjs.org/api/ng/filter/date and use it like this:

{{your_date | date:'dd-MMM-yyyy hh:mm a'}}

Play with it here http://jsfiddle.net/vpfxdrum/. Using it in your case:

<table class="table">
<thead>
    <tr>
        <th>Time</th>
        <th>Place</th>
    </tr>
</thead>
<tbody ng-repeat="l in dataget">
    <tr>                    
        <td>{{l['time'] | date:'dd-MMM-yyyy hh:mm a'}}</td>
        <td>{{l['place']}}</td>                             
    </tr>
</tbody>

edited May 20, 2016 at 8:22

answered May 19, 2016 at 9:23

Łukasz

2,1711 gold badge15 silver badges29 bronze badges

1 Comment

Divakar Over a year ago

I want to change from ng-repeat

Divakar · Accepted Answer · 2016-05-20 10:04:07Z

0

*controller.js

  var myApp = angular.module('myApp', []);
  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();
 };
});

In HTML

<div ng-app="sampleapp">
<table class="table">
<thead>
    <tr>
        <th>Time</th>
        <th>Place</th>
    </tr>
</thead>
<tbody ng-repeat="l in dataget">
    <tr>                    
        <td>{{l['time'] | datetime}}</td>
        <td>{{l['place']}}</td>                             
    </tr>
</tbody>

edited May 20, 2016 at 10:04

answered May 20, 2016 at 9:15

Divakar

412 silver badges6 bronze badges

Collectives™ on Stack Overflow

Change the date time format in angularjs

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related