Странное поведение в angular-daterangepicker
Я разрабатываю приложение Angularjs и использую https://github.com/fragaria/angular-daterangepicker для заполнения дат в таблице.
Когда приложение загружается впервые, startDate устанавливается на текущий день и endDate на 4 дня спустя. Затем startDate, endDate и все даты между ними отображаются в таблице, которая выглядит следующим образом (и все это прекрасно работает): 
Мои проблемы возникают, когда пользователь выбирает изменение диапазона дат (что также должно обновить отображение таблицы) при применении нового диапазона дат в средстве выбора.
Если пользователь выбирает диапазон дат, который находится перед диапазоном "по умолчанию", то в таблице отображаются только startDate и endDate - поэтому на этом изображении вы можете видеть, что я выбрал 2 июля по 6 июля, но только эти 2 даты отображается в таблице. 
Если вместо этого я вместо этого выберу диапазон дат, который следует за диапазоном "по умолчанию", например, с 23 июля по 27 июля, - тогда отобразятся все даты от исходного диапазона по умолчанию до 27 июля (или минус исходная дата начала), поэтому он отображает с 17 по 27 июля. 
Я хотел бы думать, что есть намного лучший способ перебирать даты между startDate & endDate, а не цикл for, который я использовал... но я просто не мог ничего найти, так как весь материал только указывает на начало и конец и игнорирует даты между ними.
Вы также можете заметить, что ive перешел за границу, сбросив переменные / объекты в 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>
Мой угловой контроллер:
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 на Плункер
2 ответа
Проблема здесь не с угловым указателем даты. Вы не выдвигаете даты rosCal массив правильно. Вот исправленный плункер: https://plnkr.co/edit/n9ZwwT957yIbmtlxBN5v?p=preview.
в for цикл, где вы нажимаете даты rosCal массив, так вы обновили переменную цикла thisdates: thisdates = moment().add(i, "days"), moment() возвращает текущую дату. Таким образом, после добавления даты начала в массив, значение thisdates устанавливается (текущая дата + 1) вместо (его собственное значение + 1). Я надеюсь, вы понимаете, в чем была ошибка.
Через 3 дня я наконец разработал ответ!!:-)
В моем коде Angular у меня было это для цикла:
for (thisdates = startingDate; thisdates <= endingDate; thisdates = moment().add(i, "days"))
{
$scope.rosCal.push({date: thisdates});
i++;
}
актуальная проблема заключалась в счетчике циклаthisdates = moment().add(i, "days")
в этом, moment() относится к текущему моменту (или дню) и, таким образом, всегда добавляется в текущий день в массив для таблицы.
Таким образом, установив 'startDate' на текущий момент (или день), он теперь работает правильно, и счетчик цикла выглядит следующим образом: thisdates = moment(startingDate).add(i, "days")