Make it Easy by Angular-JS Directive to Format or Filter Date

There is always a havoc on handling dates in the application either it's java /dot net or angular . So here is the best way I found in order to overcome the problem .

Date Directive

Here I am going to explain about angular date filtering concept and how to  use filtering concept to filter Date across your application.It is always better to create a date.js file for those filtering concept. 

The advantage of this is you can very easily filter the data anywhere in your view by just placing directive.

This can be achieved by using following code in your module defined, for example : CYW.date below.

 angular.module('CYW.date', [])  
   .filter('stringToDate', function () {  
     return function (input) {  
       /// gets Date input, if not, returns null. Also sets the date to  
       /// correct format   
       if (!input)  
         return null;  
       var date = moment(input);  
       return date.isValid() ? date.format('MM/DD/YYYY') : null;  
     };  
   })  
   .directive('cywDate', ['$filter',  
     function directives_date($filter) {  
       /// Directive script for the date  
      return {  
         restrict: 'A',  
         require: 'ngModel',  
         link: function ($scope, elem, attr, ngModel) {  
           /// **Make it a datepicker using bootstrap and Set orientation according to your needs  
           elem.datepicker({ orientation : "auto bottom"});  
           //Add calendar  
           elem.wrap('<div class="input-group"></div>');  
           var icon = $('<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>');  
           icon.click(function () {  
             /// opens up calender  
             elem.focus();  
           });  
           elem.parent().append(icon);  
           //format text going to user (model to view)  
           ngModel.$formatters.push(function (value) {  
             /// <summary>  
             /// pushes value to date  
             /// </summary>  
             /// <param name="value">The value.</param>  
             return $filter('stringToDate')(value);  
           });  
           //parse text from the user (view to model)  
           ngModel.$parsers.push(function (value) {  
             /// pushes date parse to the value  
             var date = new Date(value);  
             if (!isNaN(date.getTime())) {  
               return moment(date).toDate();  
             }  
           });  
         }  
       }  
     }  
   ])  
 ;  

Nothing More !!! just go ahead and include in your application Config so that application recognises directive.

Only thing now remains is put the directive in your input tags on view and boom .. that creates a date-picker with the formatted date .

  <input type="text" cyw-date class="form-control" id="cywStartDate" name="cywStartDate" ng-model="data.cywStartDate"  />