AngularJS date filter example


Different type of date formats return by the AngularJS date filter are listed below.


Today :
Format Filter Output
Date (d) {{ dt | date:'d' }} {{ dt | date:'d' }}
Date (dd) {{ dt | date:'dd' }} {{ dt | date:'dd' }}
Month (M) {{ dt | date:'M' }} {{ dt | date:'M' }}
Month (MM) {{ dt | date:'MM' }} {{ dt | date:'MM' }}
Year (yy) {{ dt | date:'yy' }} {{ dt | date:'yy' }}
Year (yyyy) {{ dt | date:'yyyy' }} {{ dt | date:'yyyy' }}
Hours (12 hours) {{ dt | date:'h' }} {{ dt | date:'h' }}
Hours (12 hours) {{ dt | date:'hh' }} {{ dt | date:'hh' }}
Hours (24 hours) {{ dt | date:'H' }} {{ dt | date:'H' }}
Hours (24 hours) {{ dt | date:'HH' }} {{ dt | date:'HH' }}
Minutes (m) {{ dt | date:'m' }} {{ dt | date:'m' }}
Minutes (mm) {{ dt | date:'mm' }} {{ dt | date:'mm' }}
Seconds (s) {{ dt | date:'s' }} {{ dt | date:'s' }}
Seconds (ss) {{ dt | date:'ss' }} {{ dt | date:'ss' }}
Milli Seconds (sss) {{ dt | date:'sss' }} {{ dt | date:'sss' }}
AM/PM (a) {{ dt | date:'a' }} {{ dt | date:'a' }}
TimeZone (Z) {{ dt | date:'Z' }} {{ dt | date:'Z' }}
Day (EEE) {{ dt | date:'EEE' }} {{ dt | date:'EEE' }}
Day (EEEE) {{ dt | date:'EEEE' }} {{ dt | date:'EEEE' }}
Week of year (w) {{ dt | date:'w' }} {{ dt | date:'w' }}
Week of year (ww) {{ dt | date:'ww' }} {{ dt | date:'ww' }}
shortTime {{ dt | date:'shortTime' }} {{ dt | date:'shortTime' }}
mediumTime {{ dt | date:'mediumTime' }} {{ dt | date:'mediumTime' }}
shortDate {{ dt | date:'shortDate' }} {{ dt | date:'shortDate' }}
mediumDate {{ dt | date:'mediumDate' }} {{ dt | date:'mediumDate' }}
longDate {{ dt | date:'longDate' }} {{ dt | date:'longDate' }}
fullDate {{ dt | date:'fullDate' }} {{ dt | date:'fullDate' }}
short {{ dt | date:'short' }} {{ dt | date:'short' }}
medium {{ dt | date:'medium' }} {{ dt | date:'medium' }}

Source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .tblformat { border-collapse: collapse; border: solid 1px #333; } .tblformat td, .tblformat th { border: solid 1px #333; padding: 5px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> </head> <body> <div ng-app="SampleApp" ng-controller="SampleCntrl"> Today :<span ng-bind="dt" style="font-weight: bold;"></span> <table class="tblformat"> <thead> <tr> <th> Format </th> <th> Filter </th> <th> Output </th> </tr> </thead> <tr> <td> Date (d) </td> <td> {{<em> dt | date:'d' </em>}} </td> <td> {{ dt | date:'d' }} </td> </tr> <tr> <td> Date (dd) </td> <td> {{<em> dt | date:'dd' </em>}} </td> <td> {{ dt | date:'dd' }} </td> </tr> <tr> <td> Month (M) </td> <td> {{<em> dt | date:'M' </em>}} </td> <td> {{ dt | date:'M' }} </td> </tr> <tr> <td> Month (MM) </td> <td> {{<em> dt | date:'MM' </em>}} </td> <td> {{ dt | date:'MM' }} </td> </tr> <tr> <td> Year (yy) </td> <td> {{<em> dt | date:'yy' </em>}} </td> <td> {{ dt | date:'yy' }} </td> </tr> <tr> <td> Year (yyyy) </td> <td> {{<em> dt | date:'yyyy' </em>}} </td> <td> {{ dt | date:'yyyy' }} </td> </tr> <tr> <td> Hours (12 hours) </td> <td> {{<em> dt | date:'h' </em>}} </td> <td> {{ dt | date:'h' }} </td> </tr> <tr> <td> Hours (12 hours) </td> <td> {{<em> dt | date:'hh' </em>}} </td> <td> {{ dt | date:'hh' }} </td> </tr> <tr> <td> Hours (24 hours) </td> <td> {{<em> dt | date:'H' </em>}} </td> <td> {{ dt | date:'H' }} </td> </tr> <tr> <td> Hours (24 hours) </td> <td> {{<em> dt | date:'HH' </em>}} </td> <td> {{ dt | date:'HH' }} </td> </tr> <tr> <td> Minutes (m) </td> <td> {{<em> dt | date:'m' </em>}} </td> <td> {{ dt | date:'m' }} </td> </tr> <tr> <td> Minutes (mm) </td> <td> {{<em> dt | date:'mm' </em>}} </td> <td> {{ dt | date:'mm' }} </td> </tr> <tr> <td> Seconds (s) </td> <td> {{<em> dt | date:'s' </em>}} </td> <td> {{ dt | date:'s' }} </td> </tr> <tr> <td> Seconds (ss) </td> <td> {{<em> dt | date:'ss' </em>}} </td> <td> {{ dt | date:'ss' }} </td> </tr> <tr> <td> Milli Seconds (sss) </td> <td> {{<em> dt | date:'sss' </em>}} </td> <td> {{ dt | date:'sss' }} </td> </tr> <tr> <td> AM/PM (a) </td> <td> {{<em> dt | date:'a' </em>}} </td> <td> {{ dt | date:'a' }} </td> </tr> <tr> <td> TimeZone (Z) </td> <td> {{<em> dt | date:'Z' </em>}} </td> <td> {{ dt | date:'Z' }} </td> </tr> <tr> <td> Day (EEE) </td> <td> {{<em> dt | date:'EEE' </em>}} </td> <td> {{ dt | date:'EEE' }} </td> </tr> <tr> <td> Day (EEEE) </td> <td> {{<em> dt | date:'EEEE' </em>}} </td> <td> {{ dt | date:'EEEE' }} </td> </tr> <tr> <td> Week of year (w) </td> <td> {{<em> dt | date:'w' </em>}} </td> <td> {{ dt | date:'w' }} </td> </tr> <tr> <td> Week of year (ww) </td> <td> {{<em> dt | date:'ww' </em>}} </td> <td> {{ dt | date:'ww' }} </td> </tr> <tr> <td> shortTime </td> <td> {{<em> dt | date:'shortTime' </em>}} </td> <td> {{ dt | date:'shortTime' }} </td> </tr> <tr> <td> mediumTime </td> <td> {{<em> dt | date:'mediumTime' </em>}} </td> <td> {{ dt | date:'mediumTime' }} </td> </tr> <tr> <td> shortDate </td> <td> {{<em> dt | date:'shortDate' </em>}} </td> <td> {{ dt | date:'shortDate' }} </td> </tr> <tr> <td> mediumDate </td> <td> {{<em> dt | date:'mediumDate' </em>}} </td> <td> {{ dt | date:'mediumDate' }} </td> </tr> <tr> <td> longDate </td> <td> {{<em> dt | date:'longDate' </em>}} </td> <td> {{ dt | date:'longDate' }} </td> </tr> <tr> <td> fullDate </td> <td> {{<em> dt | date:'fullDate' </em>}} </td> <td> {{ dt | date:'fullDate' }} </td> </tr> <tr> <td> short </td> <td> {{<em> dt | date:'short' </em>}} </td> <td> {{ dt | date:'short' }} </td> </tr> <tr> <td> medium </td> <td> {{<em> dt | date:'medium' </em>}} </td> <td> {{ dt | date:'medium' }} </td> </tr> </table> </div> <script> var myapp = angular.module("SampleApp", []); myapp.controller("SampleCntrl", function ($scope) { $scope.dt = new Date(); }); </script> </body> </html>