angular-daterangepicker 中的奇怪行为
Strange behaviour in angular-daterangepicker
我正在开发一个 Angularjs 应用程序，并使用 angular-daterangepicker 在 table.
上填写日期
应用首次加载时，开始日期设置为当天，结束日期设置为 4 天后。然后 startDate、endDate 和之间的所有日期显示在 table 中，看起来像这样（一切正常）：
当用户 select 在选择器中应用新日期范围时更改日期范围（这也应该刷新 table 显示）时，我的问题就出现了。
如果用户 select 的日期范围在 'default' 范围之前，则只有开始日期和结束日期会显示在 table 中 - 因此在此图像中，您可以见我 selected 7 月 2 日至 7 月 6 日，但 table 中仅显示这 2 个日期。
如果我然后 select 一个在 'default' 范围之后的日期范围，例如 7 月 23 日到 7 月 27 日 - 那么从原始默认范围到 7 月 27 日的所有日期都会得到显示（或者减去原始开始日期），因此显示 7 月 17 日至 7 月 27 日。
我想有一种更好的方法来遍历 startDate 和 endDate 之间的日期，而不是我使用的 for 循环...但是我找不到任何东西，因为所有 material 似乎只指向开始和结束并忽略了它们之间的日期。
您还可以看到我将 variables/objects 重置为 null/blank 太过分了 - 但这似乎没有任何区别。
我正在使用 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>
我的Angular控制器：
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 的新手）
Angularjs daterangepicker on Plunker
此处的问题与 angular daterangepicker 无关。您没有正确地将日期推送到 rosCal 数组。这是更正后的 plunker：https://plnkr.co/edit/n9ZwwT957yIbmtlxBN5v?p=preview。
在将日期推送到 rosCal 数组的 for 循环中，这是更新循环变量 thisdates 的方式：thisdates = moment().add(i, "days")。 moment() returns 当前日期。因此，在将开始日期推送到数组后，thisdates 的值被设置为（当前日期 + 1）而不是（它自己的值 + 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() 指的是当前时刻（或日期），因此总是在当前日期添加到 table.
的数组中
因此，通过将 'startingDate' 设置为当前时刻（或日期），它现在可以正常工作，并且循环的计数器如下所示：
thisdates = moment(startingDate).add(i, "days")
我正在开发一个 Angularjs 应用程序，并使用 angular-daterangepicker 在 table.
上填写日期应用首次加载时，开始日期设置为当天，结束日期设置为 4 天后。然后 startDate、endDate 和之间的所有日期显示在 table 中，看起来像这样（一切正常）：
当用户 select 在选择器中应用新日期范围时更改日期范围（这也应该刷新 table 显示）时，我的问题就出现了。
如果用户 select 的日期范围在 'default' 范围之前，则只有开始日期和结束日期会显示在 table 中 - 因此在此图像中，您可以见我 selected 7 月 2 日至 7 月 6 日，但 table 中仅显示这 2 个日期。
如果我然后 select 一个在 'default' 范围之后的日期范围，例如 7 月 23 日到 7 月 27 日 - 那么从原始默认范围到 7 月 27 日的所有日期都会得到显示（或者减去原始开始日期），因此显示 7 月 17 日至 7 月 27 日。
我想有一种更好的方法来遍历 startDate 和 endDate 之间的日期，而不是我使用的 for 循环...但是我找不到任何东西，因为所有 material 似乎只指向开始和结束并忽略了它们之间的日期。
您还可以看到我将 variables/objects 重置为 null/blank 太过分了 - 但这似乎没有任何区别。
我正在使用 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>
我的Angular控制器：
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 的新手）
Angularjs daterangepicker on Plunker
此处的问题与 angular daterangepicker 无关。您没有正确地将日期推送到 rosCal 数组。这是更正后的 plunker：https://plnkr.co/edit/n9ZwwT957yIbmtlxBN5v?p=preview。
在将日期推送到 rosCal 数组的 for 循环中，这是更新循环变量 thisdates 的方式：thisdates = moment().add(i, "days")。 moment() returns 当前日期。因此，在将开始日期推送到数组后，thisdates 的值被设置为（当前日期 + 1）而不是（它自己的值 + 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() 指的是当前时刻（或日期），因此总是在当前日期添加到 table.
因此，通过将 'startingDate' 设置为当前时刻（或日期），它现在可以正常工作，并且循环的计数器如下所示：
thisdates = moment(startingDate).add(i, "days")