Angularjs Examples

AJS Examples


AngularJS Set Custom Date Format Using Date Filter

In this AngularJS date filter example you will learn how to set custom date format using date filter like MM/dd/yyyy etc.

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:'MM/dd/yyyy' }}
{{ currentDate | date:'MM/dd/yyyy hh:mm:ss a' }}

AngularJS AngularJS Set Custom Date Format 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 Set custom date format 
	using date 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 Set custom date format 
	using date filter Example</legend>             
  <div ng-app="app">     
    <div ng-controller="ParentController">
      <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>