md- datePicker - Date instance error always

Question

I am getting this error The ng-model for md-datepicker must be a Date instance. Currently the model is a: string. I am using moment..

in view

<md-datepicker ng-model="Model.currentContact.getSetIncorporated" ng-model-options="{ getterSetter: true }" md-placeholder="Enter date"></md-datepicker>

in model

Contact.prototype.getSetIncorporated = function(date) {
        if (arguments.length) {
            this.company.information.incorporatedObject = date;
            this.company.information.incorporated = moment.utc(date).format('X');
        }
        if (!this.company.information.incorporatedObject) {
            if (this.company.information.incorporated !== '') {
                this.company.information.incorporatedObject = moment.utc(this.company.information.incorporated, 'X').toDate();
            } else {
                this.company.information.incorporatedObject = null;
            }}
        return this.company.information.incorporatedObject;
    }

Also I have tried several mdLocale.formatDate and parseDate. Current version is

$mdDateLocale.formatDate = function(date) {

            return moment(date).format('YYYY/MM/DD');
        };

        $mdDateLocale.parseDate = function(dateString) {

            var m = moment(dateString, 'YYYY/MM/DD', true);
            return m.isValid() ? m.toDate() : new Date(NaN);
        };

the server is sending this string 2016-09-10T22:00:00.000Z

When I convert that string to Date object with new Date(), I get right result showing in mdDatePicker but I get also Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! which brakes my page.

Community · Accepted Answer · 2017-05-23 12:18:01Z

1

It's quite simple. The value you are passing to Model.currentContact.getSetIncorporated is a string rather than a date.

Here is an example of the problem - CodePen. The console shows the error.

angular.module('MyApp',['ngMaterial'])

.controller('AppCtrl', function() {
  this.myDate = new Date();
  this.myDate = this.myDate.toString(); // Comment this out to work correctly
});

This question - How to check whether an object is a date? - will explain how to check whether you are passing a string or a date.

Update:

The reason for the message

Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached.

seems to be because Contact.prototype.getSetIncorporated is returning a Date. Returning a string works but the ng-model requires a Date!

Here's a way to get round that problem - CodePen.

angular.module('MyApp',['ngMaterial'])

.controller('AppCtrl', function($scope) {
  this.myDate = new Date();

  this.test = function () {
    return new Date();
  }  
  this.testModel = this.test();
});

Markup

<div ng-controller="AppCtrl as vm" ng-cloak="" class="datepickerdemoBasicUsage" ng-app="MyApp">
  <md-content>
    <md-datepicker ng-model="vm.testModel"  ng-model-options="{ getterSetter: true }" ng-change="change()"></md-datepicker>
  </md-content>
</div>

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Sep 14, 2016 at 13:31

camden_kid

12.8k12 gold badges57 silver badges92 bronze badges

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

7 Comments

Alex Over a year ago

I know it is a string... I even try converting that string with new Date(stringDate), but got infinite digest loop error.

Alex Over a year ago

Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

camden_kid Over a year ago

@Alexa - You may want to add that your question as that may be the main problem.

Alex Over a year ago

What to do then? It must be a function, that is the code given to me... Maybe converting to Date object must be done in mdDateLocale, but it is not working, I tried many combinations.

Alex Over a year ago

I found something, but don't know how to get it work..It must return same instance of an date object.. So how to dinamicaly change Date object valueOf? stackoverflow.com/questions/33287911/…

|

Milan · Accepted Answer · 2016-09-14 13:43:40Z

0

when you use moment you have to take the _d property from moment:

    var _convertStringToDate = function (stringDate) {

        var date;
        if (angular.isString(stringDate)) {
            date = moment(stringDate)._d;
        }

        return date;
    };

answered Sep 14, 2016 at 13:43

Milan

4445 silver badges12 bronze badges

1 Comment

Alex Over a year ago

I got Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

Collectives™ on Stack Overflow

md- datePicker - Date instance error always

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related