Date filtering and formatting in Angular js.

Here I am going to explain about angular date filtering concept. It is always better to create a filter.js file for those filtering concept. Advantage of this is you can very easily filter the data anywhere in your view . I have written same using Angular 2+ concept as well, click here if interested .

View

 <span>{{ d.time | date }}</span>

Here "date" from filter.js and "d.time" is the time that we are going to filter ( From your controller or view ).

Filter.js

angular.module('yourmodule').filter('date', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 
 
  var _date = $filter('date')(new Date(input), 'MMM dd yyyy');
 
  return _date.toUpperCase();

 };
});

Even you can format date with some condition.

angular.module('yourmodule').filter('date', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 
 
  if( your condtion )
  {
   var _date = $filter('date')(new Date(input), 'MMM dd yyyy');
  }
  else {
    var _date = $filter('date')(new Date(input), 'MM dd yyyy');
  }
 
  return _date.toUpperCase();

 };
});

Time filtering

---

angular.module('yourmodule').filter('time', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 
 
  var _date = $filter('date')(new Date(input), 'HH:mm:ss');
 
  return _date.toUpperCase();

 };
});

View

 <span>{{ d.time | time }}</span>

Date time filtering

---

angular.module('yourmodule').filter('datetime', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 
 
  var _date = $filter('date')(new Date(input),
                              'MMM dd yyyy - HH:mm:ss');
 
  return _date.toUpperCase();

 };
});

View

 <span>{{ d.time | datetime }}</span>

Filter the data in controller

---

angular.module('sampleproject').controller( 'sampleController',
function ($rootScope, $scope,$filter )
{
 
 var filterdatetime = $filter('datetmUTC')( date );
or
 var filterdatetime = $filter('datetmUTC')( $scope.date );

});

Fiddle

Related Posts

1. Client side pagination using angular js

2. Angular flash message using directive

3. Angular routing

4. Rating Stars using angular js Directive concept

5. Filtering concept in Angular JS

6. Communicate with controllers in angular js