Warum ist mein Datumseingabefeld in AngularJS Wurfartfehler?

Question

Der Fehler tritt auf, wenn ich dem Benutzer das ausgefüllte, bearbeitbare Formular anzeigen lasse (nicht wenn ein Benutzer Daten eingibt und übergibt).

HTML:

<input class="form-control" type="date" name="dateInput" id="dateOfBirth" 
        ng-model="user.dateOfBirth"> 

CController:

.controller('EditCtrl', function ($scope, $routeParams, UserDetail, $window) { 
     $scope.user = UserDetail.find({}, {'id': $routeParams.id}); 
} 

SERVICE:

service.factory('UserDetail', function ($resource) { 

    return $resource(
     'http://localhost:8080/ClearsoftDemoBackend/webresources/clearsoft.demo.users/:id', 
     {id: '@id'}, 
    { 
    find: {method: 'GET'}, 

    }); 
}); 

FEHLER: Die Daten kommen von MySQL über REST/JSON in den Dienst weiter unten

E rror: [ngModel: datefmt] Erwartet 2010-05-13T00:00:00-04:00 ein Datum zu sein

Answer 1

Es ist, weil das ist kein gültiges Datum nach Angular. Check out the doc on input[date] für ihre Anmerkung zur Datumsvalidierung. Damit es ein Datum ist, sollte es im Format YYYY-MM-DD sein.

Answer 2

AngularJS 1.3 addiert zur Eingabe [Datum | datetime-local] legt einen neuen Formatierer/Parser fest, der prüft, ob das Modell ein Date-Objekt ist, und die datefmt-Ausnahme auslöst.

if (value && !isDate(value)) { 
    throw $ngModelMinErr('datefmt', 'Expected `{0}` to be a date', value); 

Dieses Problem ist bei previos Versionen nicht vorhanden, und ich schlage vor, unter Berücksichtigung auf Upgrade erhalten zu große Alpträume zu vermeiden.

Eine Workaround ist Standard-Formatierern/Parser mit einer benutzerdefinierten dateFormat-Direktive zurücksetzen und verwenden Momentjs zum Formatieren, Strings auf Datum zu analysieren.

define(['directives/directives','momentjs'], function(directives,momentjs) { 
directives.directive('dateFormat', function() { 
     return { 
     require: 'ngModel', 
     link: function(scope, element, attr, ngModelCtrl) { 
      var format=attr.dateFormat; 
      //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; 

      ngModelCtrl.$formatters.push(function(valueFromModel) { 
      //return how data will be shown in input 
       if(valueFromModel){ 
       // For momentjs > 2.9 moment global va is not defined use momentjs instead of moment. 
        return moment(valueFromModel).format(format); 
       } 
       else 
        return null; 
      }); 
      ngModelCtrl.$parsers.push(function(valueFromInput) { 
       if(valueFromInput){ 
        //For momentjs > 2.9 moment global va is not defined use momentjs instead of moment. 
        return moment(valueFromInput,format).toDate(); 
       } 
       else 
        return null; 
      }); 
     } 
     }; 
    }); 
}); 

UPDATE Mit momentjs> 2.9 nehmen in Betracht, dass der Moment globaler var ist nicht definiert.

2.9 "Deprecation warning: Accessing Moment through the global scope is deprecated, and will be removed in an upcoming release." 

Mit AMD benötigen momentjs statt moment verwenden. dh:

return momentjs(valueFromModel).format(format); 

Answer 3

seine Grundsätzlich nicht über das Format, eine gültige new Date() Objekt im ISO-Format wollen, so was auch immer Sie Antwort erhalten, tun gerade ein neues Datum und Winkel werden glücklich sein, ich habe diese, wenn i analysiert die Nachricht Ausnahme verursacht durch Winkel

https://docs.angularjs.org/error/ngModel/datefmt?p0=2015-11-24

Answer 4

In Ihrem api

$date = date("Y-m-d"); 
$new_date = date("c",strtotime($date)); 
echo json_encode(array("date"=>$new_date)); 

In Ihrem Controller

/* var date 
* this is value from your api 
*/ 
$scope.date = new Date(date); 

Answer 5

Für Datumswert in einem Array kann man dies als verwenden:

var dates = [ 
     { id: "1" , date: "2015-04-20T11:24:20.882Z"}, 
     { id: "2" , date: "2015-05-20T11:24:20.882Z"}, 
     { id: "3" , date: "2015-06-20T11:24:20.882Z"}, 
    ]; 

     function dateStringToObject (data) { 
     for(var i=0; i < data.length; i++){ 
      data[i].date = new Date(data[i].date); 
      } 

     return data; 
     } 

    dateStringToObject(dates);