Binding tra ingresso [data] e Moment.js in AngularJS

Question

Per formulare domanda che il preparato esempio semplificato:

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

Fondamentalmente, ho solo bisogno di legame tra il modello (data di moment.js) & vista (input [date] field) per funzionare correttamente - l'input della data viene aggiornato quando il modello viene aggiornato e viceversa. Apparentemente, provare l'esempio precedente ti porta errore che il modello non è del tipo Data.

Ecco perché sto chiedendo agli sviluppatori di AngularJs esperti, come posso implementare correttamente questa associazione?

Eventuali consigli apprezzati.

Answer 1

È possibile creare filtri, in questo modo:

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

Opzionalmente è possibile passare gli argomenti nel filtro e renderlo chiamare varie funzioni momento. Dai uno sguardo all'angolare filters, sono sicuro che penserai a qualcosa che si adatta alle tue esigenze.

Answer 2

<input type="date" /> 

richiede una stringa con formato specifico o (probabilmente) oggetto JavacSript Date(). http://www.w3schools.com/html/html_form_input_types.asp

Quindi non si può veramente usare momentjs oggetto del genere.

Se si desidera avere una stringa, utilizzare l'input con type="date". Se vuoi avere momenti come la formattazione e altre cose, dovrai creare la tua direttiva o filtro.

Answer 3

Nessuna delle soluzioni proposte ha funzionato per me. Sono stato nello stesso problema e risolto con:

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

Answer 4

Creare una direttiva che analizza la data al momento e formatta momento per data.

esempio di base di seguito (per essere esteso con la gestione degli errori)

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

quando lo presenta tirare il formato originale cambiarlo al nuovo formato.

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