How to change date format using date filter in AngularJS?

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this post we will know about how to change date format using date filter in AngularJS? We are know that AngularJS provides us several filter for the developing. By using AngularJS date filter we can change the date format as if we want like as like yyyy-mm-dd, dd-MM-yyyy, MM-dd-yyyy etc. So now in the bellow example we can understand this very well date helper to how to use the date filter in Angular JS.

Now in this example i have one array also with date(yyyy-mm-dd date format) and the date format will be convert into the dd-mm-yyyy by using date filter.

Example
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
  <tr>
  	<th>Language</th>
  	<th>Date</th>
  </tr>
  <tr ng-repeat="x in names">
    <td>{{ x.language }}</td>
    <td>{{ x.date | date: 'dd-MM-yyyy' }}</td>
  </tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $scope.names = [
    			{'language': 'PHP', 'date': '2016-06-01' }, 
    			{'language': 'Laravel', 'date': '2016-06-02'},
    			{'language': 'Angular JS', 'date': '2016-06-05'},
    		];
});
</script>
</body>
</html>

Read Also : How to Use Group by year month using Laravel Query Builder ?

Thanks for read. I hope it help you. For more you can follow us on facebook.

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →