Date filtering and formatting in Angular js

In this article, we discuss Date filtering and formatting in Angular js

Date filtering and formatting in Angular js

Date filtering and formatting in Angular js
Date filtering and formatting in Angular js

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 concepts. The advantage of this is you can very easily filter the data anywhere in your view.

HTML

<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();

 };
});

Date filtering and formatting in Angular js

Even you can format the date with some conditions.

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();

 };
});

Date filtering and formatting in Angular js

Time filtering

<span>{{ d.time | time }}</span>
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();

 };
});

Date time filtering

 <span>{{ d.time | datetime }}</span>
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();

 };
});

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 );

});

Example

If you have jquery, bootstrap doesn’t add if not you can add

HTML

<div ng-app="sampleapp">
  <div ng-controller="samplecontoller" ng-init="init();">
    <div ng-repeat="date in dates" class="dateformatter">

        <span><strong>Date</strong> : {{ date.date1 }}</span>
        <span><strong>Date Format</strong> : {{ date.date1 | dateFormat }}</span>
        <span><strong>Date Format</strong> : {{ date.date1 | dateFormat1 }}</span>
        <span><strong>Time Format</strong> : {{ date.date1 | time }}</span>
       <span><strong>Date time Format</strong> : {{ date.date1 | datetime }}</span>
       <span><strong>Date time Format</strong> : {{ date.date1 | datetime1 }}</span>
        
    </div>
   </div>
</div>

CSS

.dateformatter{
    padding:10px;
}
.dateformatter span{
    color:#000 ;
    display:block;
    margin:5px 0px;
}
strong{
    width:200px;
    display:inline-block;
}

JavaScript + Angular JS

var myapp = angular.module('sampleapp', [ ]);

myapp.controller('samplecontoller', function ($scope ,$interval ) {
   
    $scope.init = $interval(function(){

    var date = new Date();
    $scope.dates = [{ "date1" : date }]
    
     },100 )

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

 };
});
myapp.filter('dateFormat1', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 
 
  var _date = $filter('date')(new Date(input), 'MM dd yyyy');
 
  return _date.toUpperCase();

 };
});

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

 };
});
myapp.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();

 };
});
myapp.filter('datetime1', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 
 
  var _date = $filter('date')(new Date(input),
                              'MM dd yyyy - HH:mm:ss');
 
  return _date.toUpperCase();

 };
});

Output

image 14
Date filtering and formatting in Angular js

we have come to the end of our article where we have learned how we can use Date filtering and formatting in Angular js.

Also Checkout Multiple Tags in the Select dropdown with Angular JS

Related Posts

One thought on “Date filtering and formatting in Angular js

Leave a Reply

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