how to filter the ng-model value using angularjs directive?

Question

i'm attaching the date element in template as

<input type="date" ng-model="experience.date_start" date-ob>

The ng-model is binding value as a string to the date. For it i need to convert this string to object(new Date(experience.date_start)). I'm trying to achieve this context via directive called as date-ob

.directive('dateOb', function(){
 return {
 require: 'ngModel',
    scope: {},
    link: function(scope, element, attrs, ctrl) {
        ctrl.$parsers.push(function(value) {
            console.log('parser!', value);
            return new Date(value);
        });
        ctrl.$formatters.push(function(value) {
            console.log('formatter!', value);
            return value;
        });
    }       
}
});

It throws

Error: [ngModel:datefmt] Expected 2014-08-28 to be a date http://errors.angularjs.org/1.4.5/ngModel/datefmt?p0=2014-08-28

How should be the code in date-ob directive for it? i'm newbie to .directive please give me the solution with explanation????..

update your directive code .

ngLover
– ngLover

2015-12-03 10:56:50 +00:00
Commented Dec 3, 2015 at 10:56 — ngLover
– ngLover, Commented Dec 3, 2015 at 10:56

Etse · Accepted Answer · 2015-12-03 12:05:06Z

2

Take a look at formatters and parsers - they are used for exactly things like these. Parsers change how the value from the view will be stored in the model. While formatters change how the value from the model will be displayed in the view.

Using a directive you could do something like this:

angular.module('myApp', [])
.directive('wrapperDirective', function(){
  return {
    link: function(scope) {
      scope.experience = {date_start: '2015-01-01'};
    }
  };
})
.directive('dateOb', function(){
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      // view --> model (change date to string)
      ngModel.$parsers.push(function(viewValue){
        return viewValue.toISOString();
      });

      // model --> view (change string to date)
      ngModel.$formatters.push(function(modelValue){
        return new Date(modelValue);
      });
    }
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-app="myApp" wrapper-directive>
    <p>Date is: {{experience.date_start}}</p>
    <input type="date" ng-model="experience.date_start" date-ob>  
</div>

edited Dec 3, 2015 at 12:05

answered Dec 3, 2015 at 11:02

Etse

1,2451 gold badge15 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user3391137 Over a year ago

it throws an error "Error: [ngModel:datefmt] Expected 2014-08-28 to be a date"

Etse Over a year ago

Look at my snippet, you can run it directly. Maybe I missunderstood what you wanted to achieve.

user3391137 Over a year ago

In your snippet input type does not update the value, only<p> is updating value.?

Etse Over a year ago

The input element updates the value on the model - which you can see as the paragraph prints the model-value directly to view. The model is stored as a string - while I parse it to a Date-object before sending it to the input (input date requires a date)

Etse Over a year ago

I had swapped the parser and formatter. The parser should parse to string. while the formatter should make a date-object.

|

ngLover · Accepted Answer · 2015-12-03 11:51:09Z

1

you can do this . it solved my problem.

.directive('dateOb', function(){
 return {
    scope: {
     dateModel :'=ngModel'
    },
    link: function(scope, element, attrs, ctrl) {
        scope.$watch('dateModel',function(n,o){
            if(!n instanceOf Date)
            {
              scope.dateModel = new Date(dateModel);
            }
        });
    }       
}
});

answered Dec 3, 2015 at 11:51

ngLover

4,6183 gold badges23 silver badges42 bronze badges

Collectives™ on Stack Overflow

how to filter the ng-model value using angularjs directive?

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related