AngularJS datepicker benutzerdefinierte Direktive Formatierer, der Datum

Question

nicht anzeigt Ich habe zwei benutzerdefinierte datepicker Richtlinien. Eine davon heißt startDatePicker-Direktive und die zweite ist endDatePicker. Ich übergebe Modell von einem zum anderen, was in Ordnung ist, aber wenn ich das Datum als String übergebe, wird das Datum nicht angezeigt. Ich weiß, es sollte nicht, weil Datepicker Date-Objekt erwartet und es nicht automatisch in Date-Objekt konvertieren kann. Da mein Backend-Server Daten als Strings zurückgibt, muss ich in Datumsobjekte konvertieren. Dafür benutze ich in meiner Direktive model. $ Formatter, um eine Zeichenfolge in ein Datumsobjekt zu konvertieren und dann an die Ansicht zu senden, damit das Datum ausgewählt und angezeigt werden kann. Das Datum wird ausgewählt, aber es wird nicht angezeigt. Um das Problem zu simulieren, habe ich zwei Variablen in meinem Controller definiert. Diese beiden werden auch für Datepicker-Modelle verwendet. Die erste Variable wird ausgewählt und im Datapicker angezeigt, aber die zweite wird nur ausgewählt, aber nicht angezeigt. Was mache ich falsch?

$scope.startDate = moment.utc("2016/12/25 00:00:00")._d; 
$scope.endDate = "2016/12/25 00:00:00"; 

Ich habe Setup Plunker die Ausgabe http://plnkr.co/edit/trEkwuO06VMJ1HdCkl5w?p=preview

komplette Richtlinie unter

angular.module('ui.bootstrap.demo').directive('endDatepicker', function() { 
return { 
    restrict: 'A', 
    scope: { 
     ngModel: "=", 
     minStartDate: "=", 
    }, 
    require: 'ngModel', 
    replace: true, 
    templateUrl: 'datepicker-template.html', 
    link: function(scope, element, attrs, ngModel) { 

    ngModel.$formatters.push(function getJsonDate(date) { 
      if (!date) return null; 
      console.log("Unformatted date " + date) 
      var newDate = moment.utc(date)._d; 
      console.log("Formatter fired " + newDate) 
      return newDate  
     }); 

     scope.popupOpen = false; 
     scope.openPopup = function($event) { 
      $event.preventDefault(); 
      $event.stopPropagation(); 
      scope.popupOpen = true; 
     }; 
     console.log(scope.endDate); 
     scope.$watch('minStartDate', function(newValue,oldValue){ 
     if (newValue) { 
      console.log(newValue) 
      scope.dateOptions.minDate = newValue; 
     } 
     }) 

     scope.dateOptions = { 
     startingDay: 1, 
     minDate: moment.utc()._d 
     } 
     scope.open = function($event) { 
     $event.preventDefault(); 
     $event.stopPropagation(); 
     scope.opened = true; 
     }; 

    } 
}; 

}); 

Answer 1

kann eine verwirrende Frage, dies zu zeigen sein.

Genau dort werden zwei ngModel Controller mit der endDatepicker Direktive verbunden sein.

One für ng-model hier:

<div end-datepicker ng-model="endDate" min-start-date="startDate"></div> 

und eine für ng-model in der Vorlage:

<input type="text" class="form-control" ... ng-model="ngModel" ... 

Beide Controller werden mit dem gleichen Modell arbeiten, aber Sie müssen die Formatierer auf die richtige hinzufügen ein.

Wenn Sie den Controller in Ihrer Anweisung benötigen, erhalten Sie den ngModel-Controller für den ersten, aber Sie benötigen den Controller für das ngModel an dem Eingang, an dem der formatierte Wert angezeigt werden soll.

Statt den Controller für die die folgenden sollte funktionieren:

link: function(scope, element, attrs, ngModel) { 

    var inputModelController = element.find('input').controller('ngModel'); 

    inputModelController.$formatters.push(function getJsonDate(date) { 
    // Code 
    });