Sunday, June 22, 2014

How to use AngularJS date filter?


date filter
Formats date to a string based on the requested format.

The following example depicts how to format the current date to a specified format.

Code: 

<!DOCTYPE html>

<html>
<head>
       <title>Using AngularJS Date Filter</title>
</head>
<body ng-app="">

       <div ng-controller="DateController">
             
              Current Date and Time: {{ today | date:'MM/dd/yyyy @h:mm a' }}
             
       </div>
      
 <script type="text/javascript">
      
   function DateController($scope) {
        $scope.today = new Date();

   }
 </script>

 <script src="lib/angular.js"></script>

</body>
</html>

Output:


Current Date and Time: {{ today | date:'MM/dd/yyyy @h:mm a' }}
  • Formats date to a string based on the requested format.
  • Usage: {{ date_expression | date : format}}
  • Date to format either as Date object, milliseconds (string or number) or various ISO 8601 datetime string formats 
  • In the above example, today represents the date_expression which is a Date object to be formatted.
  • date is the filter keyword

The following is the complete list of all date formats provided by Angular. The formats have been illustrated by displaying the formatted output of the current date.

'yyyy': 4 digit representation of year (e.g. AD 1 => 0001, AD 2010 => 2010)
{{ today | date:'yyyy' }}

'yy': 2 digit representation of year, padded (00-99). (e.g. AD 2001 => 01, AD 2010 => 10)
{{ today | date:'yy' }}

'y': 1 digit representation of year, e.g. (AD 1 => 1, AD 199 => 199)
{{ today | date:'y' }}

'MMMM': Month in year (January-December)
{{ today | date:'MMMM' }}

'MMM': Month in year (Jan-Dec)
{{ today | date:'MMM' }}

'MM': Month in year, padded (01-12)
{{ today | date:'MM' }}

'M': Month in year (1-12)
{{ today | date:'M' }}

'dd': Day in month, padded (01-31)
{{ today | date:'dd' }}

'd': Day in month (1-31)
{{ today | date:'d' }}

'EEEE': Day in Week,(Sunday-Saturday)
{{ today | date:'EEEE' }}

'EEE': Day in Week, (Sun-Sat)
{{ today | date:'EEE' }}

'HH': Hour in day, padded (00-23)
{{ today | date:'HH' }}

'H': Hour in day (0-23)
{{ today | date:'H' }}

'hh': Hour in am/pm, padded (01-12)
{{ today | date:'hh' }}

'h': Hour in am/pm, (1-12)
{{ today | date:'h' }}

'mm': Minute in hour, padded (00-59)
{{ today | date:'mm' }}

'm': Minute in hour (0-59)
{{ today | date:'m' }}

'ss': Second in minute, padded (00-59)
{{ today | date:'ss' }}

's': Second in minute (0-59)
{{ today | date:'s' }}

'.sss' or ',sss': Millisecond in second, padded (000-999)
{{ today | date:'.sss' }}

'a': am/pm marker
{{ today | date:'a' }}

'Z': 4 digit (+sign) representation of the timezone offset (-1200-+1200)
{{ today | date:'Z' }}

'ww': ISO-8601 week of year (00-53)
{{ today | date:'yyyy-MM-dd ww' }}

'w': ISO-8601 week of year (0-53)
{{ today | date:'w' }}

Format string can also be one of the following predefined localizable formats:

'medium': equivalent to 'MMM d, y h:mm:ss a' for en_US locale (e.g. Sep 3, 2010 12:05:08 pm)
{{ today | date:'medium' }}

'short': equivalent to 'M/d/yy h:mm a' for en_US locale (e.g. 9/3/10 12:05 pm)
{{ today | date:'short' }}

'fullDate': equivalent to 'EEEE, MMMM d, y' for en_US locale (e.g. Friday, September 3, 2010)
{{ today | date:'fullDate' }}

'longDate': equivalent to 'MMMM d, y' for en_US locale (e.g. September 3, 2010)
{{ today | date:'longDate' }}

'mediumDate': equivalent to 'MMM d, y' for en_US locale (e.g. Sep 3, 2010)
{{ today | date:'mediumDate' }}

'shortDate': equivalent to 'M/d/yy' for en_US locale (e.g. 9/3/10)
{{ today | date:'shortDate' }}

'mediumTime': equivalent to 'h:mm:ss a' for en_US locale (e.g. 12:05:08 pm)
{{ today | date:'mediumTime' }}

'shortTime': equivalent to 'h:mm a' for en_US locale (e.g. 12:05 pm)
{{ today | date:'shortTime' }}



No comments :

Post a Comment