Setzen Sie ModelValue als ein anderes Datumsformat auf den viewValue in Angular Direktive

Question

Ich habe einen Datepicker in einem Formular. Ich möchte ein Format für die Ansicht festlegen, aber ein anderes Format auf den Modellwert anwenden (der an eine API gesendet wird). In einfachen Worten möchte ich, dass der Benutzer "TT/MM/JJJJ" sieht, aber das Datum im ISO-Format gesendet werden muss.

Dies ist meine Richtlinie:

app.directive('standardDatepicker', function($timeout) { 
return{ 
    restrict: 'A', 
    require : '^ngModel', 
    link: function(scope, element, attrs, ngModel, ngModelCtrl){ 
      element.datepicker({ 
       format: "dd/mm/yyyy", 
       autoclose: true, 
      }).on('changeDate', function(e) { 
       ngModel.$viewValue = e.date;  
       ngModel.$render(); 
      }); 
    } 
    } 
}); 

Gibt es eine einfache Möglichkeit, dies zu erreichen?

Answer 1

sollten Sie verwenden $formatters and $parsers

function standardDatepicker() { 
    return { 
     require: 'ngModel', 
     link: function ($scope, $elem, $attrs, $ctrl) { 

      var ngModelCtrl = $ctrl; 

      ngModelCtrl.$formatters.unshift(function (value) { 
       return value.format('YYYY'); 
      }); 

      ngModelCtrl.$parsers.unshift(function (value) { 
       return value.format('YYYY-MM-DD'); 
      }); 

     } 
    } 
} 

Answer 2

$ Parsern und $ Formatierer Es gibt einen Wert zu konvertieren. Besuchen Sie https://stackoverflow.com/a/22843592/2224277 für weitere Informationen

Answer 3

Ich endete mit den $ Parsern wie folgt. Danke für alle Beiträge.

app.directive('standardDatepicker', function($timeout, dateFilter) { 
return{ 
    restrict: 'A', 
    require : 'ngModel', 
    link: function(scope, element, attrs, ngModel, ngModelCtrl){ 
      element.datepicker({ 
       format: "dd/mm/yyyy", 
       autoclose: true, 
      }).on('changeDate', function(e) { 
       ngModel.$parsers.push(function(viewValue){ 
        var isoDate = moment(e.date).format('YYYY-MM-DD'); 
        return isoDate; 
       }); 
      }); 
     } 
    } 
});