Question

我有一个AngulaarJS应用程序，用户可以选择他们想要查看的日期，并在当天和接下来的30天内打印日历。预期的功能必须是这样当用户从日历中更改日期时，它需要显示该日期，然后显示接下来的30天。

目前我的应用程序显示今天的日期和接下来的30天，但是当我在日期选择器上更改日期时不会更新日历。

我正在使用Angular Material datepicker：

<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>

然后我的Angular功能是：

$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，它对我有用：

<div class="input-daterange input-group" id="datepicker">
    <input type="text" class="input-sm form-control" name="start" />
    <span class="input-group-addon">to</span>
    <input type="text" class="input-sm form-control" name="end" />
</div>

这是一个有效的JSFiddle，https://jsfiddle.net/rekrah/L67sy555/。

Answer 2

我肯定会建议使用像momentjs这样的库。

有了它，您可以轻松操作日期，而无需太多手动的东西（事情总是会出错）。

例如，在日期中添加30天：

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

也可以添加或减去Moment对象（例如，在您的结束日期和未来日期变量中）。

使用AngularJS将30天添加到当前日期并更新日历值更改时计算的天数

2 个答案: