webentwicklung-frage-antwort-db.com.de

Das Modell ist kein Datumsobjekt bei der Eingabe in AngularJS

Verwenden von AngularJS Ich versuche, ein Datum mithilfe einer Eingabe type=date anzuzeigen:

<input ng-model="campaign.date_start" type="date">

Dies gibt jedoch den folgenden Fehler:

Error: error:datefmt
Model is not a date object

Das Datum stammt eigentlich von einer JSON-API im folgenden Format:

date_start": "2014-11-19"

Ich dachte, ich könnte es mit einem Filter beheben, aber das hat nicht funktioniert und ich bekomme die gleiche Fehlermeldung mit:

 <input ng-model="campaign.date_start | date" type="date">

Ich habe auch versucht, den String in ein Datum umzuwandeln, aber wieder bekomme ich den gleichen Fehler:

 $scope.campaign.date_start = Date(campaign.date_start);

Was kann ich noch probieren?

31
Prometheus

Sie müssen campaign.date_start mit Date instanziieren und nicht als Funktion verwenden.

Es sollte ungefähr so ​​aussehen (kleine Demo):

$scope.campaign.date_start = new Date(campaign.date_start);
21
ryeballar

Sie können diese Direktive verwenden.

angular.module('app')
.directive("formatDate", function(){
  return {
   require: 'ngModel',
    link: function(scope, elem, attr, modelCtrl) {
      modelCtrl.$formatters.Push(function(modelValue){
        return new Date(modelValue);
      })
    }
  }
})

In Ihrer HTML-Datei;

<input type="date" ng-model="date" format-date>

$formatters

Array.<Function> 

Ein Array von Funktionen, die als Pipeline ausgeführt werden sollen, wenn sich der Modellwert ändert. Die Funktionen werden in umgekehrter Array-Reihenfolge aufgerufen, wobei jeweils der Wert an den nächsten übergeben wird. Der letzte Rückgabewert wird als tatsächlicher DOM-Wert verwendet. Dient zum Formatieren/Konvertieren von Werten für die Anzeige im Steuerelement.

41
cs1707

Die Anweisung von cs1707 ist großartig, außer wenn der Gültigkeitsbereich für das Datum null oder undefined lautet, wird ein Datum mit 1/1/1970 initialisiert. Dies ist wahrscheinlich für die meisten Menschen nicht optimal

Nachfolgend finden Sie eine modifizierte Version von cs1707s Direktive, die ein null/undefined-Modell unverändert lässt:

angular.module('app').directive("formatDate", function() {
    return {
        require: 'ngModel',
        link: function(scope, elem, attr, modelCtrl) {
            modelCtrl.$formatters.Push(function(modelValue) {
                if (modelValue){
                    return new Date(modelValue);
                }
                else {
                    return null;
                }
            });
        }
    };
});

In Ihrer HTML-Datei;

<input type="date" ng-model="date" format-date>

Andere Option

Wenn Sie möchten, dass sich dies auf alle Eingaben des Typs date bezieht, müssen Sie das format-date-Attribut nicht jedem Eingabeelement hinzufügen. Sie können die folgende Anweisung verwenden. (Seien Sie vorsichtig, da dies auf unerwartete Weise mit anderen benutzerdefinierten Anweisungen interagieren kann.)

angular.module('app').directive("input", function() {
    return {
        require: 'ngModel',
        link: function(scope, elem, attr, modelCtrl) {
            if (attr['type'] === 'date'){
                modelCtrl.$formatters.Push(function(modelValue) {
                    if (modelValue){
                        return new Date(modelValue);
                    }
                    else {
                        return null;
                    }
                });
            }

        }
    };
});

In Ihrer HTML-Datei;

<input type="date" ng-model="date">
6
Jakobovski

Eine andere richtungsweisende Lösung hier:

//inside directives.js
.directive('dateField', function () {
    return {
        restrict: ' E',
        scope: {
            ngBind: '=ngModel',
            ngLabel: '@'
        },
        replace: true,
        require: 'ngModel',
        controller: function ($scope) {
            if ($scope.ngBind != null) {
                var pattern = /Date\(([^)]+)\)/;
                var results = pattern.exec($scope.ngBind);
                var dt = new Date(parseFloat(results[1]));
                $scope.ngBind = dt;
            };
        },
        templateUrl: 'templates/directives/dateField.html'
    }
})
;

Fügen Sie eine Richtlinienvorlage wie folgt hinzu:

<!-- app.directives templates/directives/dateField -->
<script id="templates/directives/dateField.html" type="text/ng-template">    
    <label class="item item-input item-stacked-label ">
        <span class="input-label">{{ngLabel}}</span>
        <input type="date" placeholder="" ng-model="ngBind" />
    </label>
</script>

Und benutze es 

<date-field ng-label="This date..." ng-model="datajson.do.date"></date-field>

Viel Glück!

1
kcho0

Verwenden der Direktive zum Zurücksetzen der Standardwinkelformatierer/-parser durch ngModelCtrl.$formatters.length = 0; ngModelCtrl.$parsers.length = 0;

Es funktioniert sowohl für input[type="date"] als auch für input[type="time"]. Funktioniert auch gut für die Cordova-App

HTML:

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

Winkelrichtlinie:

app.directive('dateInput', 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;
        }
    };
});
0
jafarbtech

Eine andere einfache Möglichkeit, eine Direktive zu verwenden: 

HTML: 

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

Richtlinie:

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

Sie können diesen Fehler vermeiden, indem Sie diesen Code verwenden, der eigentlich ein Datumsformatfehler ist, während wir unser Datum an eine Funktion oder ein API übergeben

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

wobei das Format en-us = Freitag, 1. Februar 2013, 06:00 Uhr, hoffe, dass dies anderen dabei helfen wird, ein Problem zu lösen.

0
Usman