AngularJS Format Date Using Date Filter

In this AngularJS date filter example you will learn how to format date using date filter.

Here you can view the output of the example and you can also "try it yourself" by clicking on "Live Demo" button given at the bottom.

Syntax

{{ currentDate | date:'short'}}
{{ currentDate | date:'MM/dd/yyyy'}}

AngularJS Format Date Using Date Filter Example

<!DOCTYPE html>          
<html>          
<head> <!-- www.techstrikers.com -->           
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>           
    <meta charset="utf-8">          
    <title>AngularJS Format date using date filter filter Example</title>          
  <script>          
var app = angular.module('app', []);          
    app.controller("ParentController", function ($scope) {  
      $scope.currentDate = new Date();
    });   
</script>          
</head>          
<body style="background-color:#DDE4E9;">          
  <fieldset style="background-color:#DDE4E9;font-family:arial;">                      
    <legend>AngulerJS Format date using date filter Example</legend>           
  <div ng-app="app">   
    <div ng-controller="ParentController">   
      <p>Short Date :- {{currentDate | date:'short'}}</p>
      <p>Medium Date :- {{currentDate | date:'medium'}}</p>
      <p>Full Date :- {{currentDate | date:'fullDate'}}</p>
      <p>Long Date :- {{currentDate | date:'longDate'}}</p>
      <p>Medium Date :- {{currentDate | date:'mediumDate'}}</p>
      <p>Short Date :- {{currentDate | date:'shortDate'}}</p>
      <p>Medium Time :- {{currentDate | date:'mediumTime'}}</p>
      <p>Short Time :- {{currentDate | date:'shortTime'}}</p>
      <p>Custom Date Format (MM/dd/yyyy) :- {{currentDate | date:'MM/dd/yyyy'}}</p>
      <p>Custom Date Format (dd/MM/yyyy) :- {{currentDate | date:'dd/MM/yyyy'}}</p>
      <p>Custom Date Format (MMM dd, yyyy) :- {{currentDate | date:'MMM d, yyyy'}}</p>
      <p>Custom Date Format With AM/PM :- {{currentDate | date:'MM/dd/yyyy hh:mm:ss a'}}</p>
  </div>  
</div>          
</div>          
 </fieldset>           
</body>          
</html>

See Live Example

« Previous