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:

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

Solution 2:

Use date:format after object with pipe symbol.

For Example Click here

Solution 3:

I think this helps,

Baca Juga

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

Solution 4:

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

Solution 5:

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>

Html5 Dictionary