1

我正在开发一个 Angularjs 应用程序,并使用angular-daterangepicker在表格中填写日期。

当应用程序首次加载时,startDate 设置为当天和 4 天后的 endDate。然后 startDate、endDate 和它们之间的所有日期都显示在一个看起来像这样的表中(这一切都很好): 在此处输入图像描述

当用户在选择器中应用新的日期范围时选择更改日期范围(这也应该刷新表格显示)时,我的问题就出现了。

如果用户选择的日期范围在“默认”范围之前,那么只有 startDate 和 endDate 会显示在表格中 - 所以在这张图片中,您可以看到我选择了 7 月 2 日到 7 月 6 日,但只有这两个日期是显示在表中。 在此处输入图像描述

如果我然后选择一个在“默认”范围之后的日期范围,例如 7 月 23 日到 7 月 27 日 - 那么从原始默认范围到 7 月 27 日的所有日期都会显示(或者减去原始 startDate),所以它显示 7 月 17 日至 7 月 27 日。 在此处输入图像描述

我想认为有一种更好的方法来遍历 startDate 和 endDate 之间的日期,而不是我使用的 for 循环......但我找不到任何东西,因为所有材料似乎都指向start & end & 忽略这些日期之间的日期。

您还可以看到,我将变量/对象重置为空/空白时做得太过火了——但这似乎没有任何区别。

我正在使用 Bootstrap 4.1、AngularJS 1.6.9、bootstrap-daterangepicker 3.0.3 和 angular-daterangepicker 0.2.2

任何建议将不胜感激,

我的 HTML 代码:

<div data-ng-controller="admRosController" data-ng-init="initialTable()">    
<form data-ng-submit="createRoster()" name="rosterForm" method="POST">
                <div class="form-row">
                  <div class="form-group col-md-4">
                    <label for="daterange1" class="control-label">Select Roster Dates:</label>
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <div class="input-group-text"><i class="fa fa-calendar-check-o"></i></div>
                      </div>
                      <input date-range-picker type="text" class="form-control form-control-sm date-picker" id="daterange1" name="daterange1" data-ng-model="rosData.date" options="dateRangeOptions">
                    </div>
                  </div>
                </div>
                <div class="table-responsive">
                            <table class="table table-striped table-hover" data-ng-model="roster">
                                <thead class="thead-dark">
                                    <tr>
                        <th class="text-center">Date</th>
                                        <th class="text-center">Shift 1</th>
                                        <th class="text-center">Shift 2</th>
                                        <th class="text-center">Sleep Over</th>
                                    </tr>
                                </thead>
                                <tbody>
                        <tr class="text-center" data-ng-repeat="x in rosCalJ track by $index">
                        <td>{{x.date | date:'EEE, MMMM dd, yyyy'}}</td>
                                        <td><select class="form-control form-control-sm" data-ng-model="rosData.shift1[$index]" data-ng-options="x.id as x.name for x in obj"></select></td>
                                        <td><select class="form-control form-control-sm" data-ng-model="rosData.shift2[$index]" data-ng-options="x.id as x.name for x in obj"></select></td>
                                        <td><select class="form-control form-control-sm" data-ng-model="rosData.sleep[$index]" data-ng-options="x.id as x.name for x in obj"></select></td>
                                    </tr>
                    </tbody>
                            </table>
                            <!--<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">Add Staff</button>
                            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#editModal">Edit Staff</button>
                            <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#deleteModal">Delete User</button>-->
                        </div>
                <div class="form-group has-feedback">
                  <label for="message">Roster Notes</label>
                  <textarea class="form-control" rows="3" id="notes" name="notes" data-ng-model="rosData.notes" placeholder=""></textarea>
                  <i class="fa fa-pencil form-control-feedback"></i>
                </div>
                <label>Shift Times:</label>
                <p><strong>Shift 1</strong> 8:30am - 4:30pm (8 hrs)<br>
                  <strong>Shift 2</strong> 9:00am - 3:00pm (6 hrs)</p>
                <br>
                <button type="submit" class="btn btn-primary">Save Roster</button>
                <button type="reset" value="Reset" class="btn btn-secondary">Clear</button>
              </form>

我的角度控制器:

var app = angular.module('myApp', ['ngRoute', 'ngStorage', 'daterangepicker'])

app.controller ("admRosController", function ($scope, $http, $location) {
        var startingDate = null;
        var endingDate = null;
        $scope.rosCal = [];
        $scope.rosData = [];

        loadingDate = function() {
            $scope.rosData.date = {
        startDate: moment(),
        endDate: moment().add(4, "days")
            };
        };

        $scope.initialTable = function() {
            loadingDate();
            startingDate = $scope.rosData.date.startDate;
            endingDate = $scope.rosData.date.endDate;
            $scope.displayTable();
        };

        $scope.dateRangeOptions = {
        locale : {
            format: 'MMMM D, YYYY'
        },
        eventHandlers : {
            'apply.daterangepicker' : function() {
                $scope.rosCal = null;  //clear the array
                                $scope.rosCalJ = null;
                                $scope.rosCal = [];
                                $scope.rosCalJ = [];
                                startingDate = null;
                                endingDate = null;
                                startingDate = $scope.rosData.date.startDate;
                                endingDate = $scope.rosData.date.endDate;
                                $scope.displayTable();
                        }
        }
    };

        $scope.displayTable = function() {
            var i = 0;
            var thisdates = null;
            //$scope.rosCal = [];
            //$scope.rosCalJ = [];
            $scope.obj = [];
            $http.get('php/rosstaff.php')
                .then(
                    function (response) {
                        $scope.obj = response.data;
                    },
                    function (response) {
                        // error handling routine
                    }
                );

                for (thisdates = startingDate; thisdates <= endingDate; thisdates = moment().add(i, "days"))
                {
                    $scope.rosCal.push({date: thisdates});
                    i++;
                }
                $scope.rosCal.push({date: endingDate})
                $scope.rosCalJ = JSON.parse(JSON.stringify($scope.rosCal));
            };

    });

更新: 这是 Plunker 上的代码......但是有一个问题是 Jquery 或 Angular 都不起作用?(对不起,我是使用 Plunker 的新手)
Plunker 上的 Angularjs daterangepicker

4

2 回答 2

3

这里的问题不在于角度日期范围选择器。您没有将日期rosCal正确排列。这是更正后的插件:https ://plnkr.co/edit/n9ZwwT957yIbmtlxBN5v?p=preview 。

for将日期推送到rosCal数组的循环中,这就是您更新循环变量thisdates:的方式thisdates = moment().add(i, "days")moment()返回当前日期。因此,在将开始日期推送到数组后, 的值thisdates被设置为(当前日期 + 1)而不是(它自己的值 + 1)。我希望你明白错误是什么。

于 2018-07-16T06:11:26.350 回答
1

3天后,我终于找到了答案!:-)

在我的 Angular 代码中,我有这个 for 循环:

for (thisdates = startingDate; thisdates <= endingDate; thisdates = moment().add(i, "days"))
{
   $scope.rosCal.push({date: thisdates});
   i++;
}

实际问题是其中循环的计数器
thisdates = moment().add(i, "days")
moment()指的是当前时刻(或日期),因此总是在当前日期添加到表的数组中。

因此,通过将 'startingDate' 设为当前时刻(或日期),它现在可以正常工作,并且循环的计数器如下所示: thisdates = moment(startingDate).add(i, "days")

于 2018-07-16T06:41:59.927 回答