Tuesday, 8 April 2014

Date filtering and formatting in Angular js.

Here I am going to explain about angular date filtering concept and how to show the UTC time( local time zone ) using 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 .

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


14 comments :

  1. Its very useful

    ReplyDelete
  2. Hi, Very useful. Thanks.
    But, What if I want to customize a date, which is in the following string format, "2014-05-26 17:22:35".

    ReplyDelete
  3. I am not sure if my last comment got held for moderation or if something happened to it. So here it goes again. I am interested in your Show local time zone example but I am not able to get it to work and it is not on the fiddle that you shared. Any possibility of getting you to add that to the fiddle example?

    ReplyDelete
  4. Has anyone tried this with Kendo UI grid? I have a column with the dates and time being passed down from the database. Is it possible to make this work?

    ReplyDelete
  5. It might help to others
    http://www.code-sample.com/2014/09/angularjs-documentation.html

    ReplyDelete
  6. Thank you very much

    ReplyDelete
  7. Thanks

    Another example:

    angular.module('filters',[])
    .filter('dateParse', function($filter) {
    return function(input,format,timezone) {
    return (!!input) ? $filter('date')( Date.parse(input), format, timezone) : '';
    };
    });


    {{ publication['Product']['created'] | dateParse:'dd/MM/yyyy - hh:mm a'}}


    publication['Product']['created'] = 2015-01-19 14:12:15

    ReplyDelete
  8. hi, its very useful. but i want to customize a date .

    ReplyDelete
  9. i want to display time as 19-November-2015 01:05 PM IST
    how to display the timezone as "IST"

    ReplyDelete
    Replies
    1. For timezone you may need to use some jquery plugin ,something like moment js .

      Delete
  10. Friend, I used your blog to fix one of my issue.

    ReplyDelete