Convert string to date in AngularJS directive

Question

I'm trying to convert a string date so that it works on a html input with the type set to 'date'.

So, I have the following angular app:

(function() {

    var app = angular.module('test', []);

    app.controller('MainCtrl', function($scope) {
        $scope.load = function() {                       
            $scope.message='2017-12-23T00:00:00Z';
        };
    });

    app.directive('convertDate', function() {
        return {
            restrict: 'A',
            scope: {
                ngModel: '='
            },
            link: function (scope) {    
                console.log(scope);
                console.log(scope.ngModel);

                if (scope.ngModel) scope.ngModel = new Date(scope.ngModel);
            }
        };            
    });
})();

Then my html is as follows:

     <div ng-controller='MainCtrl'>         
        <input type="date" convert-date  ng-model="message">            
        <button ng-click="load()">load</button>
    </div>

When I click on the load button I get the following error:

Error: [ngModel:datefmt] http://errors.angularjs.org/1.6.4/ngModel/datefmt?p0=2017-12-23T00%3A00%3A00Z

I understand the error is because it's a string and I need a date, which its the reason for my directive.

But even with the directive I still get the error.

What am I missing?

Thanks

Colin

Why do you need to add a directive to the input? Why not simply add ng-change="convertToDate()" to the input to transform the input to a date from within the controller itself. You won't need a directive in this case. — M0nst3R
– M0nst3R, Commented Dec 22, 2017 at 11:03
Yes but I have a load of pages where I need to use this and each page has it's own controller. I don't want the method on each controller. — Sun
– Sun, Commented Dec 22, 2017 at 11:05
Then might I suggest adding a Service instead, it would present the convertToDate method that you can use in all of your controllers to do the job without the need for Directive shenanigans. — M0nst3R
– M0nst3R, Commented Dec 22, 2017 at 11:08

Rathma · Accepted Answer · 2017-12-23 08:45:37Z

1

You can change your directive to following:

 angular.module('app').directive('convertDate', function() {
    return {
      require: 'ngModel',
      link: function(scope, elem, attrs, ctrl) {
        if (!ctrl) return;

        ctrl.$parsers.push(function(date) {
          if (angular.isDate(date))
            return new Date(date);
        })
      }
    }
  })

take a look at this working plunkr without error https://plnkr.co/edit/8aSR1dlsRfDMrM7GfQQa?p=preview

edited Dec 23, 2017 at 8:45

answered Dec 22, 2017 at 11:51

Rathma

1,3212 gold badges34 silver badges68 bronze badges

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

Comments

Shridhar Sharma · Accepted Answer · 2017-12-22 11:42:41Z

1

It is because you are using same variable in ng-model for converting. So it encounters an error before your directive converts it.

According to me, you should convert it first and then assign to the ng-model variable in your controller.

Like this,

(function() {

    var app = angular.module('test', []);

    app.controller('MainCtrl', function($scope) {
        $scope.load = function() {
            var dateString = '2017-12-23T00:00:00Z';
            $scope.message=new Date(dateString);
        };
    });

})();

No need to use directive

answered Dec 22, 2017 at 11:42

Shridhar Sharma

2,3871 gold badge12 silver badges13 bronze badges

Collectives™ on Stack Overflow

Convert string to date in AngularJS directive

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related