Error: [ngModel:datefmt] Expected `2015-05-29T19:0

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

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

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

Answer 4

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

Answer 5

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

Answer 6

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