Date filtering and formatting in controller using Angularjs

Date filtering and formatting in controller using Angularjs

In this Post We Will Explain About is Date filtering and formatting in controller using Angularjs With Example and Demo.

Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to AngularJS Date Filter function Example: Format Date and Time in controller

In this post we will show you Best way to implement AngularJS Set Custom Date Format Using Date Filter, hear for How to How to apply the date filter in AngularJS with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

READ :  jQuery Display Image preview before upload in Asp.net

It is always simple or better to create a angularjs scripts put the filter.js file for those simple date filtering concept. Advantage of this is we can used to very easily filter the all json data anywhere in HTML your view display.

View : AngularJS Datetime format in view and controller

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

Filter.js

Here “date” function using angular from filter.js and then “d.time” is the time some format that we are going to here below code filter ( From your simple controller or view ).

  
angular.module('liveApp').filter('date', function($filter)
{
return function(input)
{
if(input == null){ return ""; } 

var liveDate = $filter('date')(new Date(input), 'MMM dd yyyy');

return liveDate.toUpperCase();

};
});

Even we can format some date with some more condition using angular.

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

 };
});

Time filtering – How to apply the date filter in AngularJS

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

 };
});

View – How to format date in angularjs

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

Date time filtering

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

 };
});

View – Date filtering and formatting in Angular js

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

Filter the data in controller

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

});

Example

READ :  Vue js Loading Progress Bar Example - vue-progressbar

I hope you have Got AngularJS Date Filter function Example: Format Date and Time in controller And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.

Add a Comment

Your email address will not be published. Required fields are marked *