javascript - md- datePicker - 日期实例总是错误

Question

我收到此错误 md-datepicker 的 ng-model 必须是 Date 实例。目前模型是:string。我正在使用 moment..

在 View 中

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

在模型中

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;
    }

我还尝试了几个 mdLocale.formatDate 和 parseDate。当前版本是

$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);
        };

服务器正在发送此字符串 2016-09-10T22:00:00.000Z

当我使用 new Date() 将该字符串转换为 Date 对象时，我在 mdDatePicker 中得到了正确的结果，但我也得到了未捕获错误:[$rootScope:infdig] 达到 10 次 $digest() 迭代。中止!这会阻止我的页面。

Answer 1

这很简单。您传递给 Model.currentContact.getSetIncorporated 的值是字符串而不是日期。

这是问题的一个例子 - CodePen .控制台显示错误。

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

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

这个问题- How to check whether an object is a date? - 将解释如何检查您传递的是字符串还是日期。

更新:

消息的原因

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

似乎是因为 Contact.prototype.getSetIncorporated 正在返回一个日期。返回字符串有效，但 ng-model 需要日期!

这是解决该问题的方法 - CodePen .

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

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

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

标记

<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>