update Угловые-пользовательские настройки начальной настройки даты после изменения даты

Question

Я использую угломерную настройку даты загрузки. У меня есть два зависимых датпикера, которые представляют начало & дата окончания. Таким образом, это означает, что дата начала не может быть больше, чем дата окончания, и наоборот.

Поскольку пользователь может выбрать дату за определенный промежуток времени, изменяется минимальный и максимальный диапазоны для даты начала и окончания. Однако прямо сейчас я действительно не нашел способ обновить минимальную и максимальную дату, поскольку это не делается автоматически. Кто-нибудь знает, как это сделать?

Я попытался вызвать функцию обновления, которая обновляет shipSearchStartDateOptions.maxValue или shipSearchEndDateOptions.minValue, который будет вызываться в части изменения ng, однако это не сработало. Параметры не изменяли минимальную или максимальную дату.

В настоящее время даже начальные настройки параметров не работают. Хотя у меня почти такой же код, как указано в примерах.

Это журнал консоли опций при первом вызове:

объектов {MaxDate: пн 4 апреля 2016 13:00:00 GMT + 0200 (CEST), MinDate: Вс 13 марта 2016 00:00:00 GMT + 0100 (CET)}

Объект {MaxDate: пн 4 апреля 2016 13:00:00 GMT + 0200 (CEST), MinDate: Вс 13 марта 2016 00:00:00 GMT +0100 (CET)}

Код JS:

$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 код:

<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

Как уже указывал Роб, объекты объектов datePicker в контроллере и HTML не совпадают.

Кроме того, вам не нужно вызывать метод (ы) обновления для ng-change. Datepicker автоматически обновит параметры.

Answer 2

Вашего связывание параметров Datepicker в разметке:

shipSearchStartOptions 
shipSearchEndOptions 

но ваши объекты контроллера являются:

shipSearchStartDateOptions 
shipSearchEndDateOptions 

Они должны совпадение.