Tuesday 8 April 2014

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


15 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. Thank you very much

    ReplyDelete
  6. 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
  7. hi, its very useful. but i want to customize a date .

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

    ReplyDelete
    Replies
    1. http://www.angulartutorial.net/2017/10/format-date-using-pipe-and-append-local.html

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

    ReplyDelete
  10. How can I set the number of millisecond digits, please?

    ReplyDelete
  11. Excellent write-up. I definitely love this website.Stick with it!

    ReplyDelete