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

I'm working on angularapplication with Django with rest-framework..

The app receives it's info with json from the server.. One of the keys is created_time... The value of this field is format according to iso-8601, for example 2015-05-29T19:06:16.693209Z.

In the client I have a field:

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

But when the data is arriving I get this error:

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)

I already tried everything :( the format is exactly as the instructions in the docs of angular...

This must be happening with angular 1.3+. 1.3+ on wards ng-model for date/time input needs to be a valid date object, string representation of date is no longer allowed. You need to convert string to date object ($scope.created_time = new Date(dateString)) and bind it to the ng-model. If you follow the error link it has a clear description about the error and how to resolve it.

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

If you get your data from a REST Service, you can simply convert your fields to Date.

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

Create a simple directive that converts the model value:

HTML:

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

Directive:

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

In addition to PSL's answer. This is how to override angular 1.3+ requirements to be a Date object.

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

It can be used with AngularFire $firebaseObject and works fine with $bindTo 3-way binding. No need to extend $firebaseObject service. It works in Ionic/cordova applications.

Working example on jsfiddle

Based on [this answer][2]

[2]: https://stackoverflow.com/a/29830783/6437038 "Why is my date input field in AngularJS throwing type error?"

if date get reduced by 1 day, use this code,

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

In a way similar to cs1707 answer, I had to create a directive but doing a part by part string to time conversion. I added it as an answer for those who want fast to copy code.

Add this directive:

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

And format-time to your HTML input tag:

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

Problem Actually this is date format issue, I have resolved this issue by using this piece of code. Solution: Below piece of code will solve this issue:

            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", hope this will help others to solve issue, i was facing such error and resolved with this.

I had this error and i directly used the object: I am posting the solution witch i carried out:
1:$userData.dob=new Date(userData.dob); 2:$scope.edit.userdob=userData.dob; before 1 i faced above error then i directly created the object and assigned it to the edit scope and the problem got resolved.

If you need to update all dates in 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);