update日付変更後のAngular-UIブートストラップdatepickerオプション

Question

angle-UI Bootstrapのdatepickerを使用しています。私には開始日を表す&終了日を表す2つの依存する日付ピッカーがあります。つまり、開始日は終了日よりも大きくすることはできず、その逆も許されません。

ユーザーは一定期間内に日付を選択できるため、開始日と終了日の最小値と最大値の範囲が変更されます。しかし、今は、自動的には行われないので、minとmaxの日付を更新する方法は実際には見つかりませんでした。誰でもそのことを知っていますか？

ng-change部分で呼び出されるshipSearchStartDateOptions.maxValueまたはshipSearchEndDateOptions.minValueを更新する更新関数を呼び出そうとしましたが、それはまったく機能しませんでした。オプションは、最小または最大の日付を変更しませんでした。

現在、オプションの初期設定が機能していません。私は例で述べたのとほぼ同じコードを持っていますが。

これは、最初の呼び出しで、オプションのコンソールログです：

オブジェクト{maxDateの：月2016年4月4日13時00分00秒GMT + 0200（CEST）、MinDateプロパティ： 日2016年3月13日00:00:00 GMT + 0100（CET）}

オブジェクト{maxDateの：月4月4日13時00分00秒 2016 GMT + 0200（CEST）、MinDateプロパティ：日2016年3月13日午前0時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

Robが既に指摘したように、コントローラとHTMLのdatePickerオプションオブジェクトは一致しません。

また、ng-changeで更新メソッドを呼び出す必要はありません。 Datepickerは自動的にオプションを更新します。

Answer 2

あなたにマークアップでDatePickerのオプションを結合：

shipSearchStartOptions 
shipSearchEndOptions 

が、あなたのコントローラオブジェクトは、次のとおりです。

shipSearchStartDateOptions 
shipSearchEndDateOptions 

彼らがする必要があります一致。