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.

score 1 · Answer 1 · edited May 23 '17 at 12:18

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 '17 at 12:18

Community

1
1

answered Sep 14 '16 at 13:31

camden_kid

12,591
11
52
88

I know it is a string... I even try converting that string with new Date(stringDate), but got infinite digest loop error. – Alexa Sep 14 '16 at 13:48
`Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!` – Alexa Sep 14 '16 at 13:51
@Alexa - You may want to add that your question as that may be the main problem. – camden_kid Sep 14 '16 at 14:01
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. – Alexa Sep 14 '16 at 14:30
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? http://stackoverflow.com/questions/33287911/angular-infinite-digest-loop-from-ng-model-using-gettersetter – Alexa Sep 14 '16 at 14:59
I see it is working on Codepen, but don't know why... I don't know how to get this to work with code pattern I got using functions in model... I have a lot of functions like this... Maybe to try to do something generic for all in mdDateLocale.. because I must format them all with timeZones. Also in my model functions I get paramether as date which is undefined in codepen. – Alexa Sep 14 '16 at 15:18
@Alexa I hope I helped you towards a solution. :-) – camden_kid Sep 14 '16 at 15:31

score 0 · Answer 2 · answered Sep 14 '16 at 13:43

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 '16 at 13:43

Milan

444
5
11

I got `Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!` – Alexa Sep 14 '16 at 13:51

md- datePicker - Date instance error always

2 Answers2