使用AngularJS將30天添加到當前日期並更新日曆值更改時計算的天數

我有一個AngulaarJS應用程序，用戶選擇他們想要查看的日期，並在日曆和接下來的30天內打印日曆。預期的功能需要這樣，以便當用戶從日曆中更改日期時，需要顯示那一天以及接下來的30天。使用AngularJS將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

我做錯了什麼，以及如何更改日期選取器上的日期，我需要做些什麼才能使日曆上的日子發生變化？

來源

2017-02-26 Karma

難道我理解正確的話，做我的回答幫助？ –

我只是優化了你的HTML一點，它的工作對我來說：

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

這裏有一個工作的jsfiddle，https://jsfiddle.net/rekrah/L67sy555/。

來源

2017-02-27 00:05:33

對不起，遲到了，這很好，謝謝一堆。介意告訴我我的HTML有什麼問題？無法真正地分辨出HTML代碼 – Karma

'{$'，應該是，'{{'。而且，'$}'應該是''}}'。 –

我肯定會建議使用庫像momentjs。

有了它，您可以輕鬆操作日期，而無需太多手動操作（可能會出錯）。

例如30天添加日期：

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

時刻對象也可以增加或減少（例如，在給您的最終和未來日期變量）。

來源

2017-02-27 00:51:30

使用AngularJS將30天添加到當前日期並更新日曆值更改時計算的天數

回答

相關問題