AngularJSを使用して、カレンダー値が変更されたときに計算された現在の日付と更新日に30日を加算します。

Question

私はAngulaarJSアプリケーションを使用して、閲覧したい日をユーザーが選択してカレンダーに表示します。予定された機能は、ユーザーがカレンダーから1日を変更したときに、その日とそれに続く30日を表示する必要があるようにする必要があります。

私のアプリケーションは今日の日付と次の30日間を表示しますが、日付ピッカーの日を変更するとカレンダーは更新されません。

私は角材質日付ピッカーを使用しています：

<md-datepicker md-placeholder="Enter date" ng-model="myDate" ng-change="date_generator()" md-open-on-focus> 
</md-datepicker> 

これは私がデータをプリントアウトするために使用していますHTMLです：

<tr ng-repeat="date in futureDates"> 
    <td> 
     {$ date | date : 'yyyy-MM-dd' $} 
    </td> 

そして、私の角度の関数は次のとおりです。

$scope.date_generator = function() { 
    $scope.currentDate = $scope.myDate; 
    $scope.startDate = $scope.myDate; // Current moment 
    $scope.endDate = new Date($scope.myDate.getTime() + 30*24*60*60*1000); // Current moment + 30 days 
    $scope.iDate = new Date($scope.currentDate); // Date object to be used as iterator 
    $scope.futureDates = new Array(); 
    $scope.futureDates.push($scope.iDate.setDate($scope.iDate.getDate() - 0)); 
    while ($scope.iDate <= $scope.endDate) { 
     $scope.futureDates.push($scope.iDate.setDate($scope.iDate.getDate() + 1)); // Switch to next day 
    } 
} 

現在this is how the results look like

私は間違っているのですが、日付ピッカーの日付を変更するたびにカレンダーの日付を変更するにはどうすればいいですか？

Answer 1

私はちょうどあなたのHTMLを少し微調整し、それが私の仕事：

<tr ng-repeat="date in futureDates"> 
    <td> 
     {{ date | date : 'yyyy-MM-dd' }} 
    </td> 
    </tr> 

ここで働いてJSFiddle、https://jsfiddle.net/rekrah/L67sy555/です。

Answer 2

momentjsのようなライブラリを使用することをお勧めします。

これで、あまりにも手作業でなくても簡単に日付を操作することができます。例えば

は、現在までに30日を追加します。

console.log(moment().add(30,'d')); 

モーメントオブジェクトは、（あなたの終了と今後の日付変数に例で）加算または減算することができます。