zwischen Eingang Binding [Datum] und Moment.js in AngularJS

Question

Um Frage zu formulieren I hergestellt dem vereinfachten Beispiel:

... 
<input type="date" ng-model="selectedMoment" /> 
... 
<script> 
angular.module('dateInputExample', []) 
    .controller('DateController', ['$scope', function($scope) { 
     $scope.selectedMoment = moment(); 
     //...more code... 
    }]); 
</script> 

Grundsätzlich I zwischen Modell (moment.js Datum) & Ansicht brauchen nur Bindung (Eingabefeld [Datum], um ordnungsgemäß zu funktionieren - Datumseingabe wird aktualisiert, wenn das Modell aktualisiert wird und umgekehrt. Anscheinend würde das obige Beispiel Ihnen den Fehler bringen, dass das Modell nicht vom Typ Datum ist.

Deshalb frage ich erfahrene AngularJs-Entwickler, wie kann ich diese Bindung richtig implementieren?

Alle Hinweise geschätzt.

Answer 1

Sie können Filter erstellen, wie folgt aus:

myApp.filter('moment', function() { 
    return function(input) { 
     return moment(input); 
    }; 
}); 

Optional Sie Argumente in den Filter passieren kann und es verschiedene Momentfunktionen machen nennen. Werfen Sie einen Blick in eckige filters, ich bin sicher, dass Sie an etwas denken, das Ihren Bedürfnissen entspricht.

Answer 2

<input type="date" /> 

erfordert Zeichenfolge mit einem bestimmten Format oder (wahrscheinlich) JavacSript Date() -Objekt. http://www.w3schools.com/html/html_form_input_types.asp

So können Sie momentjs Objekt nicht wirklich so verwenden.

Wenn Sie als Ergebnis eine Zeichenfolge haben möchten, verwenden Sie einfach die Eingabe mit type="date". Wenn Sie momentjs plus wie Formatierung und andere Dinge haben möchten, müssen Sie Ihre eigenen Richtlinie oder Filter erstellen.

Answer 3

Keine der vorgeschlagenen Lösungen funktionierte für mich. Ich habe in dem gleichen Problem gewesen und gelöst mit:

Answer 4

Erstellen Sie eine Direktive, die Datum zu Moment analysiert und Moment zu Datum formatiert.

Grund Beispiel unten (um mit der Fehlerbehandlung erweitert werden)

myApp.directive('momentInput', function() { 
    return { 
     link: function(scope, elm, attrs, ctrl) { 
      ctrl.$parsers.push(function(viewValue) { 
       return moment(viewValue); 
      }); 
      ctrl.$formatters.push(function(modelValue) { 
       return modelValue.toDate(); 
      }); 
     }, 
     require: 'ngModel' 
    } 
}); 

Answer 5

wenn eintragen des Originalformat an neues Format ändern ziehen.

html

<input type="date" ng-model="input.NewEventDate" > <button type="button" class="btn btn-success" ng-click="add()">submit</button> 

Javascript

$scope.add = function(){ 
$scope.input.NewEventDate = moment($scope.input.NewEventDate).format("DD-MM-YYYY"); 
}