AngularJS date and orderBy filter

Using date and orderBy filter in AngularJS

In the given example the date format is dd/mm/yyyy and the record is sorted with respect to address.

Date filter Syntax:
{{ date_expression | date : format : timezone}}

Along with above-mentioned standard formats (dd/MM/yyyy and many more) you can format a string using the following format.
  • medium
  • short
  • fullDate
  • longDate
  • shortDate
  • fmediumTime
  • shortTime
Example:
<p> {{ Emp.DOB | date : 'fullDate'}} </p>

orderBy filter syntax:
{{ orderBy_expression | orderBy : expression : reverse}}<.span>

  • Reverse parameter is optional. You can pass true or false in place of reverse parameter.
  • To sort in ascending order, set reverse to false.
  • To sort in descending order, set reverse to true.
  • Default value of reverse is false.

Example: date and orderBy filter in AngularJS

<!DOCTYPE html>
<html>
     <head>
          <script src="Scripts/angular.min.js"></script>
          <style>
               table, th, td
               {
                    border: 1px solid grey;
                    border-collapse: collapse;
                    padding: 5px;
               }
               table tr:nth-child(odd)
               {
                    background-color: #ffe6e6;
               }
               table tr:nth-child(even)
               {
                    background-color: #ccffcc;
               }
          </style>
     </head>
          <body style="font-family:Arial; font-size:medium; color:darkblue">
               <div ng-app="myModule" ng-controller="employeeCtrl">
                    <h2>date and orderBy filter in AngularJS:</h2>
                    <table>
                         <tr>
                              <th>Employee Name</th>
                              <th>Date of Birth</th>
                              <th>Address</th>
                         </tr>
                         <tr ng-repeat="e in Employee | orderBy:'address'">
                              <td>{{e.empName}}</td>
                              <td>{{e.DOB|date:"dd/MM/yyyy"}}</td>
                              <td>{{e.address}}</td>
                         </tr>
                    </table>
               </div>
          <script>
               var myApp = angular.module("myModule", []);
               myApp.controller('employeeCtrl', function ($scope) {
                    $scope.Employee = [
                    {
                         empName: 'Raj',DOB:new Date('04-05-76'), address: 'Pune'
                    },
                    {
                         empName: 'Digvijay', DOB:new Date( '14-April-80'), address: 'USA'
                    },
                    {
                         empName: 'Jon', DOB:new Date( '10-October-79'), address: 'England'
                    },
                    {
                         empName: 'Shyam', DOB:new Date( '04-05-1980'), address: 'Nagpur'
                    },
                    {
                         empName: 'Ram', DOB: new Date('04-05-76'), address: 'Newyork'
                    },
                    {
                         empName: 'Arvind', DOB:new Date( '04-05-76'), address: 'Patna'
                    },
                    {
                         empName: 'Zen', DOB:new Date( '04-05-82'), address: 'USA'
                    },
                    {
                         empName: 'Shiva', DOB: new Date('04-05-2001'), address: 'England'
                    }
                    ];
               });
          </script>
     </body>
</html>


Output:
date orderby filter
▲