AngularJS format date using date filter

Angularjs filter can be used in angular js expression using pipe. Here is an example of AngularJS inbuilt filter date to format Javascript Date to some more readable formats.

Usage:

HTML template
{{ date_expression | date : format : timezone}}

Javascript
$filter('date')(date, format, timezone)

date filter example using template

<div ng-app="myApp" ng-controller='MyCtrl'>
  <p>date:yyyy/MM/dd/HH/mm/ss {{dateVal | date:'yyyy/MM/dd/HH/mm/SS' }}</p>
  <p>date:medium - {{dateVal | date:'medium'}}</p>
  <p>date:short - {{dateVal | date:'short' }}</p>
  <p>date:fullDate - {{dateVal | date:'fullDate' }}</p>
  <p>date:longDate - {{dateVal | date:'longDate' }}</p>
  <p>date:mediumDate - {{dateVal | date:'mediumDate' }}</p>
  <p>date:shortDate - {{dateVal | date:'shortDate' }}</p>
  <p>date:mediumTime - {{dateVal | date:'mediumTime' }}</p>
  <p>date:shortTime - {{dateVal | date:'shortTime' }}</p>
  <p>date:mediumTime:UTC - {{dateVal | date:'mediumTime':'UTC' }}</p>
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
var module = angular.module('myApp', []);
module.controller('MyCtrl', function($scope) {
  $scope.dateVal = new Date();
});
</script>
refresh

date filter example using Javascript

<div ng-app="myApp" ng-controller='MyCtrl'>
  <p>date - {{dateVal}}</p>
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
var module = angular.module('myApp', []);
module.controller('MyCtrl', function($scope, $filter) {
  $scope.dateVal = $filter('date')(new Date(), 'short');
});
</script>
refresh
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments