angularjs - ui-date 更新オプションを動的に

Question

Jquery datepicker をバインドするために Angularjs ui-date を使用しています。私のページには、start と end という名前の 2 つの日付ピッカーがあります。

開始日に基づいて終了日の開始値を変更したいと考えています。とにかく、datepicker のオプションを動的に変更する方法はありますか。

例:

開始日: 2013 年 9 月 7 日 終了日の最小日付は 2013 年 9 月 8 日である必要があります。

Answer 1

私はちょうど同じ問題に直面しました、これは私がやったことです:

次のhtmlがあるとしましょう

<div ng-controller="MyDateCtrl">
    <input ui-date="fromDatePickerOptions" type="text" ng-model="date.from" />
    <input ui-date="toDatePickerOptions" type="text" ng-model="date.to" />
</div>

次に、JS では次のようになります。

function MyDateCtrl($scope) {
    $scope.date = {
        from: new Date(),
        to:   new Date()
    };

    $scope.fromDatePickerOptions = {
      dateFormat: 'M dd, yy'
    };

    $scope.toDatePickerOptions = {
      dateFormat: 'M dd, yy'
    };

    $scope.$watch('date', function() {
      // You could offset dates however you like according to your needs.
      // Here, start cannot be after end and of course end cannot be before start.
      $scope.fromDatePickerOptions.maxDate = $scope.date.to,
      $scope.toDatePickerOptions.minDate   = $scope.date.from;
    }, true);
}

ドキュメントによると、のtrue2 番目の引数は、$watch()オブジェクトを参照ではなく等しいかどうかだけ比較します。)

$scope.fromDatePickerOptionsとの変更により$scope.toDatePickerOptions、オプションをリロードする ui-date ディレクティブが作成されます。

それでおしまい！これは私にとってはうまくいきました。