Error: [ngModel:datefmt] Expected `2015-05-29T19:06:16.693209Z` to be a date - Angular

Question

我正在 angular 申请 Django 和 rest-framework..

应用程序从服务器接收 json 的信息。其中一个键是 created_time... 此字段的值是根据 iso-8601 的格式，对于示例 2015-05-29T19:06:16.693209Z.

在客户端我有一个字段：

<input type="time" ng-model="created_time">

但是当数据到达时我得到这个错误：

Error: [ngModel:datefmt] Expected `2015-05-29T19:06:16.693209Z` to be a date http://errors.angularjs.org/1.3.13/ngModel/datefmt?p0=2015-05-29T19%3A06%3A16.693209Z
at REGEX_STRING_REGEXP (angular.js:63)
at Array.<anonymous> (angular.js:19807)
at Object.ngModelWatch (angular.js:23289)
at Scope.$get.Scope.$digest (angular.js:14235)
at Scope.$get.Scope.$apply (angular.js:14506)
at done (angular.js:9659)
at completeRequest (angular.js:9849)
at XMLHttpRequest.requestLoaded (angular.js:9790)

我已经尝试了所有方法:( 格式与 angular...

文档中的说明完全一致

Answer 1

angular 1.3+ 一定会发生这种情况。 1.3+ on wards ng-model for date/time input 需要是有效的日期对象，不再允许日期的字符串表示。您需要将字符串转换为日期对象 ($scope.created_time = new Date(dateString)) 并将其绑定到 ng-model。如果您遵循 error link，它会清楚地描述错误以及如何解决它。

All date-related inputs like require the model to be a Date object. If the model is something else, this error will be thrown. Angular does not set validation errors on the in this case as those errors are shown to the user, but the erroneous state was caused by incorrect application logic and not by the user.

Answer 2

如果您从 REST 服务获取数据，只需将字段转换为日期即可。

$http.get(url).success(function(data){
     $scope.data = data; // get row data
     $scope.data.mydatefield = new Date($scope.data.mydatefield); // convert filed to date
});

Answer 3

如果您需要更新 Array with Objects 中的所有日期

var data = [
  { id: "1" , birthday: "2016-01-20T11:24:20.882Z"},
  { id: "2" , birthday: "2016-01-20T11:24:20.882Z"},
  { id: "3" , birthday: "2016-01-20T11:24:20.882Z"},
];

  function convertDataStingToObject (data) {
    for(var i=0; i < data.length; i++ ){
      console.log('string: ' + data[i].birthday);
      data[i].birthday = new Date(data[i].birthday);
      console.log('updated: ' + data[i].birthday);
      console.log(typeof(data[i].birthday));
    }

    return data;
  }

convertDataStingToObject(data);

Answer 4

创建一个转换模型值的简单指令：

HTML:

<input date-input type="time" ng-model="created_time">

指令：

app.directive('dateInput', function(){
    return {
        restrict : 'A',
        scope : {
            ngModel : '='
        },
        link: function (scope) {
            if (scope.ngModel) scope.ngModel = new Date(scope.ngModel);
        }
    }
});

Answer 5

除了PSL的回答。这是如何覆盖 angular 1.3+ 成为日期对象的要求。

<input type="date" ng-model="book.date" date-format/>

app.directive('dateFormat', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, ngModelCtrl) {
      //Angular 1.3 insert a formater that force to set model to date object, otherwise throw exception.
      //Reset default angular formatters/parsers
      ngModelCtrl.$formatters.length = 0;
      ngModelCtrl.$parsers.length = 0;
    }
  };
});

它可以与 AngularFire $firebaseObject 一起使用，并且可以与 $bindTo 三向绑定一起使用。无需扩展 $firebaseObject 服务。它适用于 Ionic/cordova 个应用程序。

Working example on jsfiddle

基于this answer

Answer 6

问题其实这是日期格式的问题，我用这段代码解决了这个问题。 解决方法： 下面一段代码可以解决这个问题：

            var options = {
                weekday: "long", year: "numeric", month: "short",
                day: "numeric", hour: "2-digit", minute: "2-digit"
            };
            $scope.created_time = $scope.created_time.toLocaleTimeString("en-us", options);

where en-us format = "Friday‎, ‎Feb‎ ‎1‎, ‎2013‎ ‎06‎:‎00‎ ‎AM"，希望这能帮助其他人解决问题，我遇到了这样的错误并解决了这个问题。

Answer 7

我有这个错误，我直接使用了对象：我发布了解决方案我执行了：
1:$userData.dob=新日期(userData.dob); 2:$scope.edit.userdob=userData.dob; 在 1 之前我遇到了上面的错误，然后我直接创建了对象并将其分配给编辑范围，问题就解决了。

Answer 8

如果日期减少 1 天，请使用此代码，

new Date(moment.utc(value).format('l LT'))

Answer 9

以类似于 cs1707 answer 的方式，我必须创建一个指令，但要逐部分进行字符串到时间的转换。我将它添加为那些想要快速复制代码的人的答案。

添加这个指令:

app.directive("formatTime", function(){
   return {
    require: 'ngModel',
    link: function(scope, elem, attr, modelCtrl) {
      modelCtrl.$formatters.push(function(modelValue){
        var string=modelValue;
        var date=new Date();
        var time=string.split(':');
        date.setHours(+time[0]);
        date.setMinutes(time[1]);
        date.setSeconds(time[2]);
        return date;
      })
    }
   }
 })

并且 format-time 到您的 HTML input 标签：

<input type="time" data-ng-model="mytime" format-time>

Error: [ngModel:datefmt] Expected `2015-05-29T19:06:16.693209Z` to be a date - Angular

Error: [ngModel:datefmt] Expected `2015-05-29T19:06:16.693209Z` to be a date - Angular

javascript

django

angularjs

django-rest-framework