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, May 19 '16 at 06:37

score 1 · Answer 1 · answered May 19 '16 at 06:39

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>

Marin Takanov · Answer 2 · 2016-05-20T06:46:05.370

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 '16 at 06:46

answered May 19 '16 at 06:39

Marin Takanov

1,079
3
19
36

score 0 · Answer 3 · answered May 19 '16 at 06:42

0

Use date:format after object with pipe symbol.

For Example Click here

answered May 19 '16 at 06:42

Thangadurai

524
1
9
20

score 0 · Answer 4 · answered May 19 '16 at 07:03

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');
});

Łukasz · Answer 5 · 2016-05-20T08:22:03.190

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 '16 at 08:22

answered May 19 '16 at 09:23

Łukasz

2,131
1
13
28

I want to change from ng-repeat – Divakar May 20 '16 at 07:30

Divakar · Accepted Answer · 2016-05-20T10:04:07.590

*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>

Change the date time format in angularjs

6 Answers6

Linked