AngularJS Date Filter

In web applications form date field are very commonly used. Date can be display in a veriety of format style. AngulerJS has different date formate style that can be used to display date in a certain format style the default format is mediumDate.

Syntax

{{  today | date:'medium' }}      // Aug  09, 2014   09:09:02 PM //
{{  today | date:'short' }}       // 8/9/13  09:09 PM 
{{  today | date:'fullDate' }}    // Thursday, August 09,  2014 //  
{{  today | date:'longDate' }}    // August 09, 2014 //  
{{  today | date:'mediumDate' }}  // Aug  09, 2014  // 
{{  today | date:'shortDate' }}   // 8/9/14 //
{{  today | date:'mediumTime' }}  // 09:09:02 PM  //
{{  today | date:'shortTime' }}   // 09:09 PM  //

AngularJS Date Filter Example

<html>
<head>
<title>My first AngularJS Date Filter code</title>
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</Script>
<Script>
function setDate($scope) {
    $scope.date = new Date();
}
</Script>

</head>
<body>
<div ng-app="" ng-controller="setDate">
//Display Month Number - 02
<h3> Date : {{  date | date:'MM' }} </h3> 
//Display Short Month Name - Fab
<h3> Date : {{  date | date:'MMM' }} </h3> 
//Display Full Month - February
<h3> Date : {{  date | date:'MMMM' }} </h3> 

//Display Day Number - 16
<h3> Date : {{  date | date:'d' }} </h3> 

//Display Full Year - 2015
<h3> Date : {{  date | date:'yyyy' }} </h3> 
//Display Short Year - 15
<h3> Date : {{  date | date:'yy' }} </h3> 

//Display Hours - 12
<h3> Date : {{  date | date:'HH' }} </h3> 
//Display Minutes - 10
<h3> Date : {{  date | date:'mm' }} </h3>
//Display Hours and Minutes - 12:10
<h3> Date : {{  date | date:'hh:mm' }} </h3>

//Display Second - 8
<h3> Date : {{  date | date:'s' }} </h3> 
//Display Short Year - 08
<h3> Date : {{  date | date:'ss' }} </h3> 

//Display Full Year - 2015
<h3> Date : {{  date | date:'yyyy' }} </h3> 
//Display Short Year 
<h3> Date : {{  date | date:'yy' }} </h3> 

//Display Custom Date 
<h3> Date : {{  date | date:'MM/dd/yyyy hh:mm:ss a' }} </h3> 
</div>
</body>
</html>

See Live Example

« Previous