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

<tableclass="table"ng-repeat="a in list_alerts"><thead><tr><th>Time</th><th>Place</th></tr></thead><tbodyng-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:

<tableclass="table"ng-repeat="a in list_alerts"><thead><tr><th>Time</th><th>Place</th></tr></thead><tbodyng-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,

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><tbodyng-repeat="l in dataget"><tr><td>{{l['time'] | date:'dd-MMM-yyyy hh:mm a'}}</td><td>{{l['place']}}</td></tr></tbody>

Html5 Development