aktualisieren Angular-UI bootstrap datepicker Optionen nach Datum ändern

Question

Ich benutze die Angular-UI Bootstrap Datepicker. Ich habe zwei abhängige Datepicker, die Start & Enddatum darstellen. Das heißt, das Startdatum darf nicht größer sein als das Enddatum und umgekehrt.

Da der Benutzer ein Datum in einem Zeitraum auswählen kann, ändert sich der Min- und Max-Bereich für das Start- und Enddatum. Im Moment habe ich jedoch keine Möglichkeit gefunden, das Min- und Max-Datum zu aktualisieren, da dies nicht automatisch geschieht. Weiß jemand, wie man das macht?

Ich versuchte, eine Update-Funktion aufzurufen, die die shipSearchStartDateOptions.maxValue oder die shipSearchEndDateOptions.minValue aktualisiert, die im ng-change Teil aufgerufen würde, aber das hat überhaupt nicht funktioniert. Die Optionen haben das Min- oder Max-Datum nicht geändert.

Im Moment funktionieren sogar die Anfangseinstellungen der Optionen nicht. Obwohl ich fast den gleichen Code wie in den Beispielen angegeben habe.

Dies ist das Konsolenprotokoll der Optionen bei dem ersten Aufruf:

Objekt {MaxDate: Mo 4. April 2016 13.00.00 GMT + 0200 (CEST), minDate: Sun 13. März 2016 00:00:00 GMT + 0100 (CET)}

Objekt {MaxDate: Mo 4. April 2016 13.00.00 GMT + 0200 (CEST), minDate: So 13. März 2016 00.00.00 GMT +0100 (CET)}

JS-Code:

$scope.firstAvailableDate = DataProvider.getFirstTimestamp(); 
$scope.lastAvailableDate = DataProvider.getLastTimestamp(); 
$scope.searchStartDate = $scope.firstAvailableDate; 
$scope.searchEndDate = $scope.lastAvailableDate; 

$scope.shipSearchStartDate = { 
    opened: false 
}; 

$scope.shipSearchEndDate = { 
    opened: false 
}; 

$scope.shipSearchStartDateOptions = { 
    formatYear: 'yy', 
    maxDate: $scope.searchEndDate, 
    minDate: $scope.firstAvailableDate 
}; 

$scope.shipSearchEndDateOptions = { 
    formatYear: 'yy', 
    maxDate: $scope.lastAvailableDate, 
    minDate: $scope.searchStartDate 
}; 

$scope.shipSearchStartOpen = function() { 
    $scope.shipSearchStartDate.opened = true; 
}; 

$scope.shipSearchEndOpen = function() { 
    $scope.shipSearchEndDate.opened = true; 
}; 

$scope.updateOptions = function() { 
    $scope.shipSearchStartDateOptions.maxValue = $scope.searchEndDate; 
    $scope.shipSearchEndDateOptions.minValue = $scope.searchStartDate; 
}; 

HTML-Code:

<div class="row"> 
    <div class="col-md-6"> 
    <p class="input-group"> 
     <input type="text" class="form-control" ng-model="searchStartDate" 
      ng-change="clearShipSearch(); shipSearch(); updateOptions();" uib-datepicker-popup 
      is-open="shipSearchStartDate.opened" datepicker-options="shipSearchStartOptions" 
      show-button-bar="false" /> 
     <span class="input-group-btn"> 
      <button type="button" class="btn btn-default" ng-click="shipSearchStartOpen()"> 
      <i class="glyphicon glyphicon-calendar"></i> 
      </button> 
     </span> 
    </p> 
    </div> 

    <div class="col-md-6"> 
    <p class="input-group"> 
     <input type="text" class="form-control" ng-model="searchEndDate" 
      ng-change="clearShipSearch(); shipSearch(); updateOptions();" uib-datepicker-popup 
      is-open="shipSearchEndDate.opened" datepicker-options="shipSearchEndOptions" 
      show-button-bar="false" /> 
     <span class="input-group-btn"> 
      <button type="button" class="btn btn-default" ng-click="shipSearchEndOpen()"> 
      <i class="glyphicon glyphicon-calendar"></i> 
      </button> 
     </span> 
    </p> 
    </div> 
</div> 

Answer 1

Wie Rob bereits darauf hingewiesen hat, stimmen Ihre datePicker-Optionen in Controller und HTML nicht überein.

Außerdem sollten Sie die Aktualisierungsmethode (n) für ng-change nicht aufrufen müssen. Datepicker würde die Optionen automatisch aktualisieren.

Answer 2

Ihre Bindung der Datumsauswahl-Optionen im Markup:

shipSearchStartOptions 
shipSearchEndOptions 

aber Ihre Controller-Objekte sind:

shipSearchStartDateOptions 
shipSearchEndDateOptions 

Sie müssen Spiel.